用css如何写一个箭头的样式

Question

因项目要求不能使用icon,图片，只能用css去实现这个

网上三角形的很多，但是这个箭头的没找到，求求给一个方法

Answer 1

1. 正方形两条边
2. 旋转45度

=

.arrow-right
  width 1em
  height 1em
  border-right 1px solid currentColor
  border-top 1px solid currentColor
  transform rotate(45deg)

Answer 2

http://www.cssarrowplease.com/

Answer 3

百度上的这个 我没测试 加个 border-radius 大小颜色啥的再调调 就行了吧

#triangle-facing-right {  
        display: inline-block;  
        margin: 72px;  
        border-right: 24px solid;
        border-bottom: 24px solid;  
        width: 120px; 
        height: 120px;  
        transform: rotate(-45deg);  
    }  

<div id="triangle-facing-right"></div>  

Answer 4

别自己写啊。。。
平时做做玩具还可以
自己做项目还是用成熟的东西吧
http://www.iconfont.cn/
搜索箭头就可以找到很多了。不建议自己写

Answer 5

可以试下svg图，简单快速。

<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg" version='1.1'>
                            <!--M:moveto L:lineto-->
                            <path d="M0 0 L8 7 L0 14" stroke="#fff" stroke-width="1" fill="none"/>
                        </svg>