使用CSS绘制角度侧/平行四边形

Question

需要绘制菜单角的两侧

内容可以是一些标签或链接.

Answer 1

使用CSS3 transform skew怎么样？

演示

.shape { 
    width: 200px; 
    height: 50px; 
    -webkit-transform: skew(30deg); 
    -moz-transform: skew(30deg); 
    transform: skew(30deg);
    background: #000;
    margin: 20px;
}

没有什么可以解释的,这是一个简单的div元素,我已经倾斜30deg将导致你期望的形状.

注意:这是一个CSS3属性,所以旧的浏览器,以及IE将破坏你的东西,请确保你使用CSS3 Pie.

其他实现这一目标的方法是使用:after和:before伪而且随着CSS三角形content财产.

演示2(保留红色三角形用于演示目的)

演示3(换色)

演示4(正如你评论的那样,你需要使用top: 0;for:before和:afterpseudo,因为当你添加文本时,它会将三角形从顶部移开.所以为了防止这种情况,请使用top: 0;)

在这里,我使用一个简单的div元素,并将2个CSS三角形放置positioned absolute到容器中.这比上面更兼容,如果你想要一个NON CSS3解决方案,你可以选择这个.请确保您使用display: block;的:before,以及:after.当然,你可以合并常见的样式,但我保持两者分开,这样你就可以轻松地单独定制它们.

 .shape { 
    width: 200px; 
    height: 50px; 
    background: #000;
    margin: 50px;
    position: relative;
}

.shape:before {
    display: block;
    content: "";
    height: 0;
    width: 0;
    border: 25px solid #f00;
    border-bottom: 25px solid transparent;
    border-left: 25px solid transparent;
    position: absolute;
    left: -50px;
}

.shape:after {
    display: block;
    content: "";
    height: 0;
    width: 0;
    border: 25px solid #f00;
    border-top: 25px solid transparent;
    border-right: 25px solid transparent;
    position: absolute;
    right: -50px;
}