用CSS绘出圆角三角形、多边形的独特方法

2024-02-03 21:43:59

CSS绘出圆角三角形
三角形，一种基本几何图形，常用于网站设计中，它可以增加网站的动感和趣味性。通过CSS实现圆角三角形主要用到了transform:rotate()属性和border-radius属性。

方法一：使用transform:rotate()属性
在下面的例子中，我们使用transform:rotate()属性将一个矩形元素旋转45度来创建三角形，然后使用border-radius属性设置圆角。

.triangle {
  width: 100px;
  height: 100px;
  background-color: #f00;
  transform: rotate(45deg);
  border-radius: 50%;
}

方法二：使用伪元素
同样，你也可以使用伪元素来创建三角形。

.triangle {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: #f00;
}
.triangle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #f00;
}

CSS实现多边形

多边形是一种由多条边组成的几何图形，在网页设计中也很常见。您可以使用CSS中的多边形生成器来创建各种形状的多边形，如五边形、六边形等。

方法一：使用CSS多边形生成器
在下面的例子中，我们使用CSS多边形生成器创建了一个六边形。

.hexagon {
  width: 200px;
  height: 200px;
  background-color: #f00;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

方法二：使用伪元素
你也可以用伪元素来实现多边形。

.hexagon {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #f00;
}
.hexagon::before,
.hexagon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
  height: 50%;
}
.hexagon::before {
  border-top: 100px solid transparent;
  border-left: 100px solid #f00;
}
.hexagon::after {
  border-bottom: 100px solid transparent;
  border-right: 100px solid #f00;
}