CSS - Как сделать прямоугольник с заостренными сторонами?

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

Я хотел бы знать, как сделать так, чтобы тег кнопки HTML имел форму, указанную выше, с использованием чистого CSS3. Ребята, вы можете мне помочь?


button html css css-shapes shape
person t0byman    schedule 14.05.2014    source источник
comment
Используйте ::before и ::after с базовыми треугольниками CSS.   -  person Niet the Dark Absol    schedule 14.05.2014

Ответы (1)


arrow_upward
9
arrow_downward

Хитрость заключается в использовании псевдоклассов :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/

person Robin    schedule 14.05.2014