Question

在CSS3中创建这种特定形状/形状组合是否比我目前正在做的更容易或更好？我已经尝试了一些不同的东西。

向下的三角形应该位于三条线的正下方，但我似乎无法在那里找到它。

我希望它看起来像这样：

.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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

使用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伪的高度和宽度。如果容器不是正方形，则必须手动计算值。

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>

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的{{1}}更改为border-top，并调整triangle-container和height以完全对齐三角形这是小提琴 - https://jsfiddle.net/s6bcjzjr/5/

Answer 5

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

答案是：

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

在此处查看：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 7

使用之前和之后的单元素方法（fiddle）：

EntitySet

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

7 个答案: