我正在为一个网站创建模板。我想要创建一个类似于这样的菜单:
我找到了以下代码作为解决方案,但是我无法将div分成4个部分并以响应式的方式添加文本。可以使用
![enter image description here](https://istack.dev59.com/mHWcH.webp)
position:absolute
来实现,但它不是响应式的。如何使用CSS以响应式的方式实现?
.background {
background-color: #BCBCBC;
width: 100px;
height: 50px;
padding: 0;
margin: 0
}
.line1 {
width: 112px;
height: 47px;
border-bottom: 1px solid red;
-webkit-transform: translateY(-20px) translateX(5px) rotate(27deg);
position: absolute;
/* top: -20px; */
}
.line2 {
width: 112px;
height: 47px;
border-bottom: 1px solid green;
-webkit-transform: translateY(20px) translateX(5px) rotate(-26deg);
position: absolute;
top: -33px;
left: -13px;
}
<div class="background">
<div class="line1"></div>
<div class="line2"></div>
</div>