如何使用CSS制作人字形箭头? [英] How to Make A Chevron Arrow Using CSS?

问题描述

好的，所以每个人都知道您可以使用此三角形:

Ok, so everyone knows you can make a triangle using this:

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

然后生成一个实心的实心三角形.但是，您将如何像这样制作一个空心箭头状的三角形?

And that produces a solid, filled in triangle. But how would you make a hollow-type arrow-like triangle, like this?

推荐答案

您可以使用 before 或 after 伪元素，并对其应用一些CSS.有多种方法.您可以在 before 和 after 两者中添加，然后旋转并定位它们中的每一个以形成一个条形图.一个更简单的解决方案是在 before 元素上添加两个边框，然后使用 transform:rotation .

You can use the before or after pseudo-element and apply some CSS to it. There are various ways. You can add both before and after, and rotate and position each of them to form one of the bars. An easier solution is adding two borders to just the before element and rotate it using transform: rotate.

向下滚动以获得使用实际元素而不是pseuso元素的其他解决方案

在这种情况下，我将箭头作为项目符号添加到列表中，并使用 em 大小来使它们与列表字体正确匹配.

In this case, I've added the arrows as bullets in a list and used em sizes to make them size properly with the font of the list.

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> 是正确的，但出于安全考虑，您也可以使用跨度.

Of course you don't need to use before or after, you can apply the same trick to a normal element as well. For the list above it is convenient, because you don't need additional markup. But sometimes you may want (or need) the markup anyway. You can use a div or span for that, and I've even seen people even recycle the i element for 'icons'. So that markup could look like below. Whether using <i> for this is right is debatable, but you can use span for this as well to be on the safe side.

/* 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的很棒的库尼古拉斯·加拉格尔(Nicolas Gallagher)的图标.:)

If you seek more inspiration, make sure to check out this awesome library of pure CSS icons by Nicolas Gallagher. :)

这篇关于如何使用CSS制作人字形箭头?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！