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

需要绘制菜单的棱角

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

解决方法

如何使用 CSS3 transform skew？

Demo

.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和：之前的伪和CSS三角形以及内容属性.

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

Demo 3(颜色更改)

Demo 4(如你所说,你需要使用top：0; for：before和：after pseudo,因为当你添加文本时,它会从顶部移动两个三角形,所以为了防止这样做,使用top：0

原文地址：https://www.jb51.cc/css/214205.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。

• 上一篇：css – Overflow-x不工作下一篇：如何覆盖CSS