CSS？这个箭头是怎么做的？答案

【问题标题】：CSS? How is this arrow made?CSS？这个箭头是怎么做的？
【发布时间】：2015-05-06 16:31:20
【问题描述】：

这让我发疯了。我一直在使用 Firefox 检查器试图弄清楚这个箭头是如何在Headway site 上制作的（如下）。

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

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

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

【问题讨论】：

标签： html css css-shapes

【解决方案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。

【讨论】：

Firefox 检查器一定有问题。无论我点击什么，我都没有看到右侧弹出 CSS。
类似的东西（45度切割）通常使用透明边框来完成。
@CaptSaltyJack 对于它的价值，this is what I get in Firefox。
@JoshCrozier 有趣！我无法在检查器的代码窗格中单击::before，我必须在水平条上单击它：i.imgur.com/HSG6hbk.png。否则我不会得到右边的 CSS 规则。我将把它报告为 FF 中的错误。谢谢你的帮助！！
::before 和 ::after 之后的伪元素在技术上不是 DOM 的一部分。很长一段时间，在检查元素时没有浏览器显示它们。我记得他们开始出现在 chrome canary 的元素窗格中的那一天。这是美好的一天。

【解决方案2】：

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

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

&lt;div class="triangleDiv"&gt;&lt;/div&gt;

只需调整边框宽度即可获得所需的大小。无需转换。通过调整哪些边框有宽度，您可以“旋转”三角形。

【讨论】：

不错，希望您不介意我将其添加为 sn-p。

【解决方案3】：

前面的答案很好！

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

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

希望有帮助！

【讨论】：

【解决方案4】：

您可以通过旋转正方形来完成他们所做的事情，但更常见的解决方案是使用边框属性：

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

【讨论】：