带有伪元素的 Html/Css 三角形答案

【问题标题】：Html/Css Triangle with pseudo elements带有伪元素的 Html/Css 三角形
【发布时间】：2018-06-05 23:14:37
【问题描述】：

我正在尝试使用伪元素创建一个三角形。如下图所示。

但这就是我得到的。

这是我到目前为止所尝试的。

.container .form--container:before {
    content: "";
    position: absolute;
    top: 0px;
    left: 130px;
    width: 28px;
    height: 28px;
    transform: translate(-1rem, -100%);
    border-left: 1.5rem solid #979797;
    border-right: 1.5rem solid #979797;
    border-bottom: 1.5rem solid white;
}

【问题讨论】：

标签： html css css-transforms pseudo-element

【解决方案1】：

问题在于边框的使用。您可以查看此链接How do CSS triangles work?，您将了解边框的工作原理以及为什么会得到此输出。

另一种解决方案是像这样使用 rotation 和 border ：

.box {
  border: 1px solid;
  margin: 50px;
  height: 50px;
  position:relative;
  background: #f2f2f5;
}

.box:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-top: 1px solid;
  border-left: 1px solid;
  top: -11px;
  left: 13px;
  background: #f2f2f5;
  transform: rotate(45deg);
}

<div class="box">

</div>

如果你想让你的带箭头的盒子是透明的，这里有另一个技巧来实现它（因为上面的解决方案将纯色作为背景）：

body {
 margin:0;
 background-image:linear-gradient(to right,yellow,pink);
}

.box {
  border: 1px solid;
  border-top:transparent; /*make border-top transparent*/
  margin: 50px;
  height: 50px;
  position:relative;
  /* Use gradient to mimic the border top with a transparent gap */
  background:linear-gradient(to right,black 10px,transparent 10px,transparent 39px,black 39px) top/100% 1px no-repeat;
}

.box:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-top: 1px solid ;
  border-left: 1px solid;
  top: -11px;
  left: 14px;
  transform: rotate(45deg);
}

<div class="box">

</div>

这是另一个带有虚线边框的版本：

body {
 margin:0;
 background-image:linear-gradient(to right,yellow,pink);
}

.box {
  border: 1px dashed;
  border-top:transparent; /*make border-top transparent*/
  margin: 50px;
  height: 50px;
  position:relative;
  background:
   repeating-linear-gradient(to right,black 0,black 3px,transparent 3px,transparent 6px) top left/10px 1px,
   repeating-linear-gradient(to right,black 0,black 3px,transparent 3px,transparent 6px) top right/calc(100% - 40px) 1px;
  background-repeat:no-repeat;
}

.box:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  border-top: 1px dashed;
  border-left: 1px dashed;
  top: -11px;
  left: 13px;
  transform: rotate(45deg);
}

<div class="box">

</div>

【讨论】：

理论上也可以用clip-path完成吗？喜欢这个：clip-path: polygon(0 100%, 0 40%, 10% 40%, 15% 0, 20% 40%, 100% 40%, 100% 100%); 还是会导致问题？