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

转载于:https://www.cnblogs.com/chenxiangling/p/7763232.html