如何使用CSS的花式箭头？ [英] How to Make A Fancy Arrow Using CSS?

问题描述

好的，所以每个人都知道你可以使用这个三角形：

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

这会产生一个实心的三角形。但是你怎么能像这样做一个空心箭头形的三角形呢？

解决方案

您可以使用之前的或之后的伪元素，并应用一些CSS。有各种方法。您可以在 c>之前添加，在之后添加，然后旋转和定位每个条形以形成其中一个条形。一个更简单的解决方案是在元素之前添加两个边框，并使用 transform：rotate 旋转

在这种情况下，我已将箭头添加为列表中的项目符号，并使用 em 大小，

  ul {list-style：none;} ul.big {list-style：none; font-size：300％} li :: before {position：relative; top：3pt; content：; display：inline-block; / *通过使用em缩放，箭头将与字体* / width：0.4em;身高：0.4em; border-right：0.2em实心黑色;边框顶部：0.2em实心黑色; transform：rotate（45deg）; margin-right：0.5em;} / *更改颜色* / li：hover {color：red; / *对于文本* /} li：hover :: before {border-color：red; / *对于箭头（它是一个边框）* /}  

 < 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>  

当然，你不需要在 c>之前使用，或 c>之后使用，你可以对普通元素以及。对于上面的列表，它是方便的，因为你不需要额外的标记。但有时候你可能想要（或需要）标记。你可以使用 div 或 span ，我甚至看到人们甚至回收 i 元素。所以标记可以看起来像下面。是否使用< i> 这是正确的是有争议的，但你也可以使用span为安全。

-edit-我降低了箭头，因为它在评论中被要求。 jsdata-hide =false>

  / *默认图标格式* / i {display：inline-block; font-style：normal; position：relative;} / *其他格式的箭头图标* / i.arrow {top：2pt; width：0.4em;身高：0.4em; border-right：0.2em实心黑色;边框顶部：0.2em实心黑色; transform：rotate（45deg）;}  

 有< i class =arrowtitle =arrow icon>< / i>在您的文本中。此箭头是< i class =arrowtitle =arrow icon>< / i>如果您不想要，请将< i class =arrowtitle =arrow icon>< / i> 'top'在CSS.And，所以你可以有一个< i class =arrowtitle =箭头图标>< / i> 。 

如果您寻求更多灵感，请参阅Nicolas Gallagher的纯粹 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?

解决方案

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.

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

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.

-edit- I lowered the arrow a bit because it was asked for in comment.

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

/* Additional formatting for arrow icon */
i.arrow {
    top: 2pt;
    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> deliberately lowered slightly on request.
If you don't want that, change the <i class="arrow" title="arrow icon"></i> 'top' in the CSS.
And so you can have an <i class="arrow" title="arrow icon"></i> in your text.

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

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