使用CSS创建箭头 [英] create an arrow using css

问题描述

是否可以使用CSS在下面的按钮中创建类似箭头的方法？

Is there any way to create an arrow like that in the following button, using CSS?

我知道如何创建类似三角形的箭头

I know how to create triangle-like arrows like this

#triangle_arrow {
        top: 3pt;
        content: "";
        display: inline-block;
        width: 0.5em;
        height: 0.5em;
        border-right: 0.1em solid black;
        border-top: 0.1em solid black;
        transform: rotate(45deg);
    }

但是向箭头角的那条线使我感到困惑！

but that line towards the arrow's corner is confusing me!

推荐答案

已经有一种方法可以实现此目标，即James提出的建议，但是您甚至可以使用 pseudo选择器来实现或使用使用 font awesome 的预定义图标在某个标签旁边获得一个箭头图标，如下所示。

Already there is way through which you could achieve this i.e. suggested by James, but you could even do this using pseudo selectors or using pre-defined icons using font awesome to get an arrow icon next to some tag, as below.

解决方案1：

#box{
  width:100px;
  height:50px;
  background:blue;
  position:relative;
}    
#box:before{
        top: 20px;
        right:10px;
        content: "";
        display: inline-block;
        width: 0.5em;
        height: 0.5em;
        border-right: 0.1em solid white;
        border-top: 0.1em solid white;
        transform: rotate(45deg);
        position:absolute;
}
#box > p:after{
  content:'';
  width:20px;
  height:1px;
  background:white;
  right:10px;
  top:24px;
  position:absolute;
}
#box > p{
  font-size:24px;
  color:#fff;
  padding:10px;
  box-sizing:border-box;
}

<div id="box">
<p>Next</p>
</div>

解决方案2：

#box{
  width:100px;
  height:50px;
  background:blue;
  position:relative;
}    
#box > p{
  font-size:24px;
  color:#fff;
  padding:10px;
  box-sizing:border-box;
}
#box > p > .fa{
  color:#fff;
  font-size:16px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div id="box">
<p>Next <i class="fa fa-arrow-right"></i></p>
</div>

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