css设置尖角按钮

http://js.alixixi.com/a/2014021292298.shtml

http://w3cshare.com/example/?pid=134

http://w3cshare.com/css-border/

div

一二三四五八九十

css

左尖右凹
btn:before {position: absolute;content: " ";border: transparent 14px solid;border-width: 13px 8px;border-right-color: red;top: 1px;left: -16px;height: 0;width: 0;}btn {position: relative;width: 165px;height: 30px;background: #4a886c;border-radius: 5px;margin-left: 14px;text-align: center;line-height: 28px;color: #ffffff;font-size: 14px;border: 1px solid red;}btn:after {position: absolute;content: " ";border: red 14px solid;border-width: 15px 8px;border-right-color: transparent;top: -1px;left: 158px;height: 0;width: 0;}
左凹右尖
 btn2:before {position: absolute;content: " ";border: red 14px solid;border-width: 15px 8px;border-left-color: transparent;top: -1px;left: -14px;height: 0;width: 0;}btn2 {position: relative;width: 165px;height: 30px;background: red;border-radius: 5px;margin-left: 18px;text-align: center;line-height: 28px;color: #ffffff;font-size: 14px;border: 1px solid red;}

btn2:after {position: absolute;content: " ";border: transparent 14px solid;border-width: 13px 10px;border-left-color: red;top: 1px;left: 163px;height: 0;width: 0;}


很漂亮的实现

http://www.cnsecer.com/6589.html
讲的最清楚的说明

http://w3cshare.com/css-border/