html - 如何使用 CSS 制作人字形箭头？

Question

好的，所以每个人都知道你可以用这个做一个三 Angular 形:

#triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

这会生成一个实心三 Angular 形。但是你会如何制作一个像这样的空心箭头状三 Angular 形？

Answer 1

您可以使用 before或 after伪元素并对其应用一些 CSS。有多种方法。您可以同时添加 before和 after , 并旋转和定位它们中的每一个以形成其中一个条。一个更简单的解决方案是为 before 添加两个边框。元素并使用 transform: rotate 旋转它.

向下滚动以查看使用实际元素而不是伪元素的不同解决方案

在这种情况下，我将箭头作为元素符号添加到列表中并使用 em大小，使它们的大小与列表的字体相符。

ul {
    list-style: none;
}

ul.big {
    list-style: none;
    font-size: 300%
}

li::before {
    position: relative;
    /* top: 3pt; Uncomment this to lower the icons as requested in comments*/
    content: "";
    display: inline-block;
    /* By using an em scale, the arrows will size with the font */
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(45deg);
    margin-right: 0.5em;
}

/* Change color */
li:hover {
  color: red; /* For the text */
}
li:hover::before {
  border-color: red; /* For the arrow (which is a border) */
}

<ul>
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>

<ul class="big">
    <li>Item1</li>
    <li>Item2</li>
    <li>Item3</li>
    <li>Item4</li>
</ul>

当然你不需要使用before或 after ，您也可以将相同的技巧应用于普通元素。对于上面的列表，它很方便，因为您不需要额外的标记。但有时您可能仍然想要(或需要)标记。您可以使用 div或 span为此，我什至看到人们甚至回收 i “图标”的元素。因此该标记可能如下所示。是否使用<i>因为这是有争议的，但为了安全起见，您也可以使用 span。

/* Default icon formatting */
i {
  display: inline-block;
  font-style: normal;
  position: relative;
}

/* Additional formatting for arrow icon */
i.arrow {
    /* top: 2pt; Uncomment this to lower the icons as requested in comments*/
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(45deg);
}

And so you can have an <i class="arrow" title="arrow icon"></i> in your text.
This arrow is <i class="arrow" title="arrow icon"></i> used to be deliberately lowered slightly on request.
I removed that for the general public <i class="arrow" title="arrow icon"></i> but you can uncomment the line with 'top' <i class="arrow" title="arrow icon"></i> to restore that effect.

如果您寻求更多灵感，请务必查看这个很棒的纯 CSS icons by Nicolas Gallagher 库. :)