Html CSS？这个箭是怎么做的？

这快把我逼疯了。我一直在使用Firefox inspector来尝试弄清楚这个箭头是如何在浏览器上生成的（如下所示）

我通过inspector删除了代码块，并将代码缩减为：

无论我在哪里检查，我都找不到这样的形状。没有背景图像，没有字形，什么都没有。在这一点上，这几乎不重要，但我正在努力弄清楚他们是如何做到这一点的

---

有没有CSS大师愿意看一看并插话？为了学习。：）

它只是一个旋转的正方形，呈三角形

如您所见，元素是一个正方形（相同的

高度

/

宽度

）。元素绝对位于

左侧：50%

和

-31px（宽度的一半）的负
左边距
，用于水平居中。最后，
transform:rotate（-45度）
用于旋转正方形

以下是使用的样式：

.home-testimonial-wrapper:before
.home-cta-area::before, {
    display: block;
    width: 62px;
    height: 62px;
    background: #253031;
    position: absolute;
    top: -15px;
    left: 50%;
    margin: 0 0 0 -31px;
    z-index: 5;
    content: "";
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

除此之外，如果您有兴趣了解如何使用CSS创建三角形，请参见。
您可以通过使用零宽度/高度div的边框创建三角形：


.triangleDiv{
宽度：0；
身高：0；
边框样式：实心；
边框宽度：0 100px 100px 100px；
边框颜色：透明透明#000000透明；
}
您可以像他们那样旋转正方形，但更常见的解决方案是使用border属性：

.example {
  position: relative;
}
.example:after {
  content: '';
  display: block;
  position: absolute;
  top: 0; /* or wherever */
  left: 0; /* or wherever */
  border: 10px solid transparent;
  border-bottom-color: #000;
}

前面的答案很好

我只是想补充一下，对于这样的设计元素，我总是使用以下两种方法之一

创建设计特征的伪元素（如上所述）

包含作为svg的设计功能的伪元素

希望有帮助
 Firefox检查器一定出了问题。无论我点击什么，我都看不到CSS会在右边弹出。像这样的东西（45度切割）通常是用透明的边框来完成的。@CaptSaltyJack，不管它值多少钱，@JoshCrozier有趣！我无法单击
：：在检查器的代码窗格中单击
之前，我必须在水平条上单击它：。否则，我就不会得到右边的CSS规则。我要在FF中把它作为一个bug报告。谢谢你的帮助<代码>：:before
和after
伪元素在技术上不属于DOM的一部分。有很长一段时间，没有浏览器在检查元素时显示它们。我记得有一天他们开始出现在chrome canary的元素窗格中。这是美好的一天。美好的一天，希望你不介意我把它作为一个片段添加。