鍍金池/ 問答/HTML/ 用css如何寫一個(gè)箭頭的樣式

用css如何寫一個(gè)箭頭的樣式

因項(xiàng)目要求不能使用icon,圖片，只能用css去實(shí)現(xiàn)這個(gè)
clipboard.png
網(wǎng)上三角形的很多，但是這個(gè)箭頭的沒找到，求求給一個(gè)方法

回答
編輯回答
醉淸風(fēng)
  1. 正方形兩條邊
  2. 旋轉(zhuǎn)45度

=

.arrow-right
  width 1em
  height 1em
  border-right 1px solid currentColor
  border-top 1px solid currentColor
  transform rotate(45deg)
2017年9月11日 07:05
編輯回答
舊顏

http://www.cssarrowplease.com/

2018年7月18日 14:46
編輯回答
別瞎鬧

別自己寫啊。。。
平時(shí)做做玩具還可以
自己做項(xiàng)目還是用成熟的東西吧
http://www.iconfont.cn/
搜索箭頭就可以找到很多了。不建議自己寫

2018年9月17日 06:02
編輯回答
失魂人

可以試下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>
2017年7月14日 11:14
編輯回答
吢丕

百度上的這個(gè) 我沒測(cè)試 加個(gè) border-radius 大小顏色啥的再調(diào)調(diào) 就行了吧

#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>
2017年3月5日 06:10