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

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

原文地址：https://www.jb51.cc/css/242137.html