使用css3实现一个不规则div的布局 电脑版发表于:2023/3/7 16:05 要实现不规则的div布局,可以使用CSS3的clip-path属性。该属性可以剪切元素的形状,从而实现不规则的布局。以下是一个示例代码: HTML: ``` <div class="irregular"></div> ``` CSS: ``` .irregular { width: 200px; height: 200px; background-color: #f00; -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%); clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%); } ``` 在该示例中,我们创建了一个类名为“irregular”的div元素,并设置了其宽度、高度和背景颜色。然后,使用clip-path属性,我们定义了一个五边形的形状,从而实现了不规则的布局。 需要注意的是,clip-path属性目前还不是所有浏览器都支持,因此在使用时需要考虑浏览器兼容性问题。 效果如下: ![](https://img.tnblog.net/arcimg/xiuxin/b9f9f23dfe4b4946a6a8de139bb31e35.png)