Html CSS-如何制作带尖边的矩形？

---

我想知道如何使用纯CSS3使HTML按钮标记具有上面链接中的形状。你们能帮帮我吗？

诀窍是使用伪类

：before

和

：after

。试着这样做：

.yourButton {
    position: relative;
    width:200px;
    height:40px;
    margin-left:40px;
    color:#FFFFFF;
    background-color:blue;
    text-align:center;
    line-height:40px;
}

.yourButton:before {
    content:"";
    position: absolute;
    right: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:20px solid transparent;
    border-right:40px solid blue;
    border-bottom:20px solid transparent;
}

.yourButton:after {
    content:"";
    position: absolute;
    left: 100%;
    top:0px;
    width:0px;
    height:0px;
    border-top:20px solid transparent;
    border-left:40px solid blue;
    border-bottom:20px solid transparent;
}

---

jsiddle:

使用

：before

和

：：after

和基本CSS三角形。