css设置尖角按钮

http://js.alixixi.com/a/2014021292298.shtml
http://w3cshare.com/example/?pid=134 http://w3cshare.com/css-border/
div

<div class="btn">一二三四五八九十</div>

css

<pre name="code" class="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;
}
<pre name="code" class="css">左凹右尖

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/