如何创建一些常见的CSS3不规则形状

css3 不规则图形设计在现代 web 页面设计中越来越流行。做不规则的设计已经变得越来越简单，完全可以在不使用 javascript 或后端脚本的情况下实现。这个实现方式叫css3不规则。

CSS3 不规则的优势在于它的灵活性和可响应性。我们可以创建不同设备分辨率的完美自适应页面。此外，良好的不规则设计能够为你的网站增加一些独特的风格。

CSS3 不规则图形的创建很容易，只需要对所需图形进行切割，然后用向其周围添加颜色或使用背景图片来使其看起来更吸引人。

现在，让我们看一下如何创建一些常见的 CSS3 不规则形状。

1. 三角形

三角形是 CSS3 不规则图形中最基本的形状之一。可以通过以下代码来创建：

立即学习“前端免费学习笔记（深入）”；

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid #007bff;
  border-left: 50px solid transparent;
}

2. 梯形

梯形同样是一种简单的形状，与三角形类似。但与三角形不同的是，梯形具有两个短边和两个长边。

蕉点AI

AI电商商品图生成平台 | 智能商品素材制作工具

下载

.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;
}

3. 平行四边形

平行四边形是一个简单的不规则形状，可以用下面的代码创建：

.parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background-color: #007bff;
}

4. 椭圆形

椭圆形是另一种 CSS3 不规则形状，可以用以下代码创建：

.ellipse {
  width: 100px;
  height: 50px;
  border-radius: 50%;
  background-color: #007bff;
}

5. 多边形

我们可以用下面的代码创建一个五角星：

.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 页面设计中，不规则的图形设计能够给页面增添一些独特风格，从而为我们的网站带来更好的用户体验。