利用css3实现箭头

需求

在一些开发中，经常会用到一些箭头，如图所示：

要实现图上的抢这个箭头，传统的做法就是切一张这样的图片，然后最为背景图就行了。但考虑到节约图片加载资源以及css3的强大特性，我们完全可以用CSS3来实现如图需求。

实现

关于如何用css3实现三角形、箭头的方法有很多，百度一下你就知道。这边的话，可以把上图看成两部分，一部分是三角形，一部分是矩形就行了。具体实现的代码是这样的。

 <div class="info-r">    <span class="btn">抢</span> </div>

 .info-r {        float: right;        .btn {          width: 56px;          font-size: 32px;          color: #ff4400;          line-height: 62px;          background-color: #ffec68;          display: block;          text-align: center;          position: relative;          &:before {            border: 31px solid transparent;            border-right: 10px solid #ffec68;            width: 0;            height: 0;            left: -41px;            position: absolute;            content: ' '          }        }      }

这样就可以了。

延伸

利用这种方法我们可以实现三角形，但如果我们要实现诸如>、<这种箭头怎么办呢。其实也很好实现。我们只要设置两个大小不一的三角形，然后将三角形层叠，小的三角形盖住大的三角形的中间区域，然后只展示大的三角形的外边框，就可以实现了。
具体实现：

<div id="demo"></div>

#demo {  width: 100px;  height: 100px;  background-color: #ccc;  position: relative;  border: 4px solid #333;}#demo:after, #demo:before {  border: solid transparent;  content: ' ';  height: 0;  left: 100%;  position: absolute;  width: 0;}#demo:after {  border-width: 9px;  border-left-color: #ccc;  top: 15px;}#demo:before {  border-width: 14px;  border-left-color: #333;  top: 10px;}

具体可以参考这篇文章：Css arrows and shapes without markup