CSS？这个箭头是如何制作的？

Question

这让我发疯。我一直在使用Firefox检查器来尝试弄清楚Headway网站下面的箭头是如何制作的。

我通过删除检查器中的代码块，将其缩减到这个样子：

无论我在哪里检查，都找不到这样的形状。没有背景图片，没有字形，什么也没有。现在甚至几乎不重要了，但我正在拼命地想弄清楚他们是如何做到的！

有任何CSS大师愿意看看并发表意见吗？为了学习而已。 :)

- CaptSaltyJack

Answer 1

这只是一个旋转的正方形，使用::before 伪元素进行形状定义。

如您所见，该元素是一个正方形（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。

- Josh Crozier

---

Firefox检查器肯定有问题。无论我点击什么，右侧都不会弹出CSS。 - CaptSaltyJack

这样的东西（如45度切割）通常使用透明边框来实现。 - Shomz

@CaptSaltyJack 就您所说的而言，这是我在Firefox中看到的截图。 - Josh Crozier

@JoshCrozier 很有趣！我无法在检查器的代码窗格中单击 ::before，我必须在水平栏上单击它：http://i.imgur.com/HSG6hbk.png。否则，我将无法在右侧获得CSS规则。我将在FF中报告这个错误。感谢您的帮助！！ - CaptSaltyJack

::before 和 ::after 伪元素并不是 DOM 的一部分。有一段时间，没有浏览器在检查元素时显示它们。我记得它们开始出现在 Chrome Canary 的元素面板上的那一天。那是个好日子。 - rlbaxter

Answer 2

您可以通过调整零宽/高度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>

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

- sideroxylon

---

不错，希望你不介意我将其添加为代码片段。 - Shomz

Answer 3

前面的回答很好！只是想补充一点，对于这样的设计元素，我总是使用以下两种方法之一。

1. 伪元素创建设计特点（如上所述）

2. 伪元素包含SVG作为设计特点

希望有所帮助！

- Sara Mote

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

- Jack