CSS - 如何使双方尖矩形？ [英] CSS - How to make rectangle with pointed sides?

问题描述

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

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

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/

这篇关于CSS - 如何使双方尖矩形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！