我如何创建这个特定的形状？

Question

在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>

Answer 1

我切换了三角形容器边框顶部和调整边缘

* { 
 
    -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>

Answer 2

.triangle-container { 
top: 0px; 
width: 30px; 
height: 1px; 
position: relative; 
border-top: 2px solid #e74c3c; 
margin-top: 3px; 
} 

.triangle { 
position: absolute; 
margin: auto; 
top: -12px; 
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; 
} 

Answer 3

.triangle-container { 
    top: -35px; 
    width: 30px; 
    height: 40px; 
    position: relative; 
    border-bottom: 2px solid #e74c3c; 
} 

https://jsfiddle.net/s6bcjzjr/6/

Answer 4

我已经更新了你的小提琴，现在你的造型看起来很完美。我所做的是border-bottom改为triangle-container的border-top，并调整height和margin对准三角形完美
这里是小提琴 - https://jsfiddle.net/s6bcjzjr/5/

Answer 5

答案是：

.triangle-container { 
    top: -36px; 
} 

---

见它在这里：

.triangle-container { 
 
    top: -36px; 
 
    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>

Answer 6

使用之前和之后（fiddle）甲一种元素方法：

<a href="#" class="open down-arrow"></a> 

.down-arrow { 
    display: inline-block; 
    position: relative; 
    width: 30px; 
    height: 14px; 
    border-top: 2px solid #e74c3c; 
    border-bottom: 2px solid #e74c3c; 
} 

.down-arrow::before { 
    display: block; 
    position: absolute; 
    top: 3px; 
    right: 0; 
    left: 0; 
    height: 3px; 
    border-top: 2px solid #e74c3c; 
    border-bottom: 2px solid #e74c3c; 
    content: ''; 
} 

.down-arrow::after { 
    display: block; 
    position: relative; 
    top: 4px; 
    left: 0; 
    right: 0; 
    width: 21px; 
    height: 21px; 
    margin: 0 auto; 
    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; 
    content: ''; 
} 

Answer 7

使用SVG：

可以创建这个容易使用SVG。没有什么复杂的，你需要的只有三行元素和一个路径元素。

• 所有这三个元件line具有两个坐标，其中（X1，Y1）表示的线和（X2，Y2）的起始点代表了线的终点。

• 的path元件采用的路径（d），并将其值可以如下解释：

  • M5,20 - 移动到这是5像素到容器和20像素到右的点。
  • L95,20 - 从前一点（5,20）到（95,20）画一条线。
  • L50,45 - 画一条从前一点（95,20）到（50,45）的直线。
  • z - 关闭路径。也就是说，绘制一条连接点（50,45）和起点的连线。

svg { 
 
    height: 100px; 
 
    width: 50px; 
 
} 
 
line, 
 
path { 
 
    stroke: #e74c3c; 
 
    stroke-width: 2; 
 
} 
 
path { 
 
    fill: none; 
 
    stroke-linejoin: bevel; 
 
}

<svg viewBox='0 0 100 100' preserveAspectRatio='none'> 
 
    <g id='graphic'> 
 
    <line x1='5' y1='5' x2='95' y2='5' /> 
 
    <line x1='5' y1='10' x2='95' y2='10' /> 
 
    <line x1='5' y1='15' x2='95' y2='15' /> 
 
    <path d='M5,20 L95,20 L50,45z' /> 
 
    </g> 
 
</svg>

---

使用CSS与单个元素：

您可以使用一个单一的元素也与CSS达到相同的形状。以下是相同的示例代码片段。以下是对形状如何实现的解释。

• 具有容器高度和宽度的父锚标记。
• :before伪元素相对于容器绝对定位，高度为20px。这个元素的背景是一个线性渐变，它具有2px所需的颜色，并且对于其余部分是透明的。默认情况下，渐变填充它的容器，所以这个单一的背景图案产生三条线。
• :after元素再次相对于容器定位。然后旋转该伪元素，使得其左边界和底边界产生三角形的成角度的部分。另一个线性渐变背景会产生三角形的顶部线条。
• 我已经使用毕达哥拉斯定理计算了假的:after的高度和宽度。如果容器不是正方形，那么您必须手动计算值。

a { 
 
    position: relative; 
 
    display: inline-block; 
 
    height: 50px; 
 
    width: 50px; 
 
} 
 
a:before { 
 
    position: absolute; 
 
    content: ''; 
 
    top: 3px; 
 
    left: 0px; 
 
    height: 20px; 
 
    width: 100%; 
 
    background: linear-gradient(to bottom, #e74c3c 2px, transparent 2px); 
 
    background-size: 100% 5px; 
 
} 
 
a:after { 
 
    position: absolute; 
 
    content: ''; 
 
    top: 50%; 
 
    left: 50%; 
 
    height: calc(50px/1.414); 
 
    width: calc(50px/1.414); 
 
    border-bottom: 2px solid #e74c3c; 
 
    border-left: 2px solid #e74c3c; 
 
    transform: translateX(-50%) translateY(-50%) rotate(-45deg); 
 
    background: linear-gradient(to top right, transparent 46%, #e74c3c 46%, #e74c3c 50%, transparent 50%); 
 
}

<a href='#'></a>