Вопрос

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?

Это было полезно?

Решение

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

.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/

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top