CSS -如何制作有尖边的矩形?(复制)

This question already has an answer here:

这个问题已经有了答案:

How to make triangle shape in before a div in pure css? 1 answer
如何在纯css中在div之前创建三角形形状?1回答
How do CSS triangles work? 18 answers
CSS三角形是如何工作的?18个答案

http://nl.tinypic.com/r/jgm90h/8

I would like to know how to make a HTML button tag have the shape in the link above using pure CSS3. Can you guys help me out?

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

1 个解决方案

#1

The trick is to use the pseudo classes :before and :after. Try it like this:

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

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

#1