如何制作带有尖角的矩形？

这个问题在这里已经有了答案：

如何在纯CSS的div之前制作三角形？ 1个答案

CSS三角形如何工作？ 18个答案

---

诀窍是使用伪类: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;
}

JsFiddle：http://jsfiddle.net/VpW5x/

链接地址: http://www.djcxy.com/p/89479.html

上一篇: How to make rectangle with pointed sides?

下一篇: Draw triangle on right