我怎样才能创建这个特殊的形状？

Question

有没有比我目前正在做的更简单或更好的方法来创建 CSS3 中这个特定的 shape/combination 形状？我已经尝试了一些不同的东西。

朝下的三角形应该正好位于三条线的下方，但我似乎无法到达那里。

我希望它看起来像这样：

.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

.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 2

我将三角形容器的边框切换到顶部并调整了边距

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

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

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

Answer 4

我已经更新了你的 fiddle，现在你的身材看起来很完美。我所做的是将 border-bottom 更改为 triangle-container 的 border-top，并调整 height 和 margin 以完美对齐三角形
这是 fiddle - 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 - 移动到容器右侧 5px 向下 20px 的点。
- 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 pseudo 的高度和宽度。如果容器不是正方形，则您必须手动计算值。

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>

我怎样才能创建这个特殊的形状？

How can I create this particular shape?

css

css-shapes