如何创建一些常见的CSS3不规则形状-前端问答-PHP中文网

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

PHPz

发布： 2023-04-13 11:36:22

原创

1782人浏览过

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

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

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

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

三角形

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

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

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

登录后复制

梯形

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

先见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;
}

登录后复制

平行四边形

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

.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不规则形状的详细内容，更多请关注php中文网其它相关文章！