CSS？这个箭头是怎么做出来的？

Question

这让我发疯。我一直在使用 Firefox 检查器试图弄清楚这个箭头是如何在 Headway site.

上制作的（如下）

我通过检查器删除块来削减代码，并将其归结为：

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

有 CSS 专家愿意看一看并插话吗？为了学习。 :)

Answer 1

它只是一个 ::before pseudo element 形式的旋转正方形。

如你所见，元素是一个正方形（同height/width）。元素绝对定位 left: 50% 和 -31px 的负值 margin-left （宽度的一半）用于水平居中。最后用transform: rotate(-45deg)旋转正方形

这是使用的样式：

.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 制作三角形，请参阅 this answer。

Answer 2

你可以通过玩弄零的边界来制作三角形 width/height div:

.triangleDiv {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 100px 100px 100px;
        border-color: transparent transparent #000000 transparent;
    }

<div class="triangleDiv"></div>

只需调整边框宽度即可获得您想要的尺寸。无需变换。通过调整哪些边框具有宽度，您可以 'rotate' 三角形。

Answer 3

您可以像他们一样旋转正方形，但更常见的解决方案是使用边框属性:

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

Answer 4

前面的回答都不错！

只是想补充一点，对于这样的设计元素，我总是使用两种东西中的一种。

创建设计特征的伪元素（如上所述）
包含设计特征作为 svg 的伪元素

希望对您有所帮助！

CSS？这个箭头是怎么做出来的？

CSS? How is this arrow made?

html

css

css-shapes