CSS實現帶箭頭按鈕

效果如下：

思路：

　　首先把按鈕的邊框設置好，然后去掉按鈕的右邊框，

　　然后給按鈕添加偽元素:before和:after,絕對定位於按鈕的右邊，top值為-按鈕邊框的高度，邊框寬度為按鈕高度(包括邊框)的1/2，邊框顏色為透明色

　　偽元素:after的right值為：-按鈕的高度(包括邊框)-1，左邊框顏色為按鈕的背景色

　　偽元素:before的right值為：-按鈕的高度(包括邊框)，左邊框顏色為按鈕的邊框色即可

 

示例代碼：

　　CSS：

.button{display:inline-block; position:relative; cursor:pointer; height:36px; line-height:36px; padding:0 15px; border:1px solid red; border-right:none; background:white;}
.button:before,.button:after{position:absolute; right:-37px; top:-1px; border:19px solid transparent; border-left-color:white; content:' ';}
.button:before{right:-38px; border-left-color:red;}

HTML：

<div class="button">帶箭頭按鈕</div>

在線演示：http://sandbox.runjs.cn/show/76qt2aum