在
CSS3中创建这种特定形状/形状组合是否比我目前正在做的更简单或更好的方法？我已经尝试了一些不同的东西.
向下的三角形应该位于三条线的正下方,但我似乎无法在那里找到它.
我希望它看起来像这样：
https://jsfiddle.net/s6bcjzjr/
.triangle-container {
top: 0;
width: 30px;
height: 40px;
position: relative;
border-bottom: 2px solid #e74c3c;
}
.triangle {
position: relative;
margin: auto;
top: 30px;
left: 0;
right: 0;
width: 21px;
height: 21px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-right: 2px solid #e74c3c;
border-bottom: 2px solid #e74c3c;
}
.line {
width: 30px;
position: relative;
border-bottom: 2px solid #e74c3c;
margin-top: 3px;
}
<a href="#" class="open">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="triangle-container">
<div class="triangle"></div>
</div>
</a>
解决方法
我将三角形容器的边框切换到顶部并调整边距
* {
-webkit-Box-sizing: border-Box;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
}
.triangle-container {
top: 0;
width: 30px;
height: 40px;
position: relative;
border-top: 2px solid #e74c3c;
margin-top: 3px;
}
.triangle {
position: relative;
margin: auto;
top: -10.5px;
left: 0;
right: 0;
width: 21px;
height: 21px;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
border-right: 2px solid #e74c3c;
border-bottom: 2px solid #e74c3c;
}
.line {
width: 30px;
position: relative;
border-bottom: 2px solid #e74c3c;
margin: 3px 0 0 0;
}
<a href="#" class="open">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="triangle-container">
<div class="triangle"></div>
</div>
</a>
