使用 css 创建箭头

Question

有没有什么方法可以使用 CSS 在下面的按钮中创建一个箭头？

我知道如何创建像这样的三角形箭头

#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);
    }

但是箭头角的那条线让我很困惑！

Answer 1

对你来说幸运的是，→ HTML entity 存在，这意味着你不需要使用 CSS 三角形，而是可以简单地在伪元素中使用 content：

button {
  background: #0898b8;
  border: 1px solid #0898b8;
  color: white;
  line-height: 24px;
  padding: 6px 12px;
}

span::after {
  content: '→';
  font-size: 18px;
  margin-left: 4px;
}

<button>
  <span>Next</span>
</button>

Answer 2

已经有方法可以实现这一点，即 James 的建议，但您甚至可以使用 pseudo selectors 或使用预定义图标使用 font awesome 来实现下一个箭头图标一些标签，如下所示。

解决方案一：

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

方案二：

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

Answer 3

可调整大小的 CSS-only 箭头。 https://codepen.io/ArtZ91/pen/jjbOvG

<div class="css-arrow top" style="width: 15px; height: 30px; zoom: 2;"></div>

.css-arrow {
  position: relative;
  zoom: 1;
  &:before {
      box-sizing: border-box;
      content: "";
      display: block;
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
      top: 1px;
      bottom: 0;
      width: 1px;
      background: #000;
      zoom: 2;
  }
  &:after {
    box-sizing: content-box;
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 57%;
    height: 0;
    padding-bottom: 57%;
    border: 1px solid #000;
    border-width: 1px 0 0 1px;
    transform: translate(0, 0) rotate(45deg);
    transform-origin: 0% 0%;
    border-radius: 0;
    zoom: 2;
  }
  &.right {
    transform: rotate(90deg);
  }
  &.bottom {
    transform: rotate(180deg);
  }
  &.left {
    transform: rotate(270deg);
  }
}

使用 css 创建箭头

create an arrow using css

css

css-shapes