CSS3 不规则图形设计在现代 Web 页面设计中越来越流行。做不规则的设计已经变得越来越简单，完全可以在不使用 JavaScript 或后端脚本的情况下实现。这个实现方式叫CSS3不规则。
CSS3 不规则的优势在于它的灵活性和可响应性。我们可以创建不同设备分辨率的完美自适应页面。此外，良好的不规则设计能够为你的网站增加一些独特的风格。
CSS3 不规则图形的创建很容易，只需要对所需图形进行切割，然后用向其周围添加颜色或使用背景图片来使其看起来更吸引人。
现在，让我们看一下如何创建一些常见的 CSS3 不规则形状。
- 三角形
三角形是 CSS3 不规则图形中最基本的形状之一。可以通过以下代码来创建：
.triangle {
width: 0;
height: 0;
border-top: 50px solid #007bff;
border-left: 50px solid transparent;
}- 梯形
梯形同样是一种简单的形状，与三角形类似。但与三角形不同的是，梯形具有两个短边和两个长边。
.trapezoid {
height: 0;
width: 100px;
border-top: 50px solid #007bff;
border-bottom: 50px solid #007bff;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
}- 平行四边形
平行四边形是一个简单的不规则形状，可以用下面的代码创建：
.parallelogram {
width: 150px;
height: 100px;
transform: skew(20deg);
background-color: #007bff;
}- 椭圆形
椭圆形是另一种 CSS3 不规则形状，可以用以下代码创建：
.ellipse {
width: 100px;
height: 50px;
border-radius: 50%;
background-color: #007bff;
}- 多边形
我们可以用下面的代码创建一个五角星：
.star {
height: 0;
width: 0;
border-right: 50px solid transparent;
border-bottom: 50px solid #007bff;
border-left: 50px solid transparent;
transform: rotate(35deg);
}
.star:before {
height: 0;
width: 0;
margin: -50px 0 0 -25px;
content: "";
position: absolute;
border-right: 25px solid transparent;
border-bottom: 30px solid #fff;
border-left: 25px solid transparent;
transform: rotate(-35deg);
}
.star:after {
width: 0;
height: 0;
margin: -20px 0 0 -10px;
content: "";
position: absolute;
border-right: 10px solid transparent;
border-bottom: 12px solid #007bff;
border-left: 10px solid transparent;
transform: rotate(35deg);
}总结
CSS3 不规则图形设计并非难事。有了正确的工具和初步的知识，就能轻松创建出简单的形状。在 Web 页面设计中，不规则的图形设计能够给页面增添一些独特风格，从而为我们的网站带来更好的用户体验。
以上就是如何创建一些常见的CSS3不规则形状的详细内容，更多请关注编程网其它相关文章！
