CSS？这个箭如何制作？

Question

这让我疯了。我一直在使用Firefox检查器试图弄清楚Headway site上如何制作此箭头。

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

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

任何CSS大师都会关注一下并加入进来？为了学习。 ：）

Answer 1

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

如您所见，元素是一个正方形（相同height / width）。该元素的绝对位置为left: 50%，负margin-left为-31px（宽度的一半），用于水平居中。最后，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

您可以通过播放零宽度/高度div的边框来制作三角形：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

只需调整边框宽度即可获得所需尺寸。不需要转换。通过调整哪些边框有宽度，您可以旋转＆＃39;三角形。

Answer 3

之前的答案很好！

只是想添加，对于像我这样的设计元素，我总是使用两件事之一。

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

2. 包含设计特征的伪元素为svg

希望有所帮助！

Answer 4

你可以做他们在旋转方块时所做的事情，但更常见的解决方案是使用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;
}