css 6边形

CSS中的六边形是一种非常流行的样式，可以用来添加装饰性元素到网站的设计中。下面将向大家介绍如何使用CSS来创建六边形。

.hexagon {
  position: relative;
  width: 200px;
  height: 115.47px;
  background-color: #39CCCC;
}

.hexagon:before,.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
}

.hexagon:before {
  bottom: 100%;
  border-bottom: 57.74px solid #39CCCC;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 57.74px solid #39CCCC;
}

css 6边形

以上代码中，我们首先创建了一个类名为"hexagon"的元素，这个元素的宽度为200像素，高度为115.47像素，背景颜色为#39CCCC。

接着，在这个元素之前和之后分别创建了:before和:after伪元素，这两个伪元素分别用于创建了六边形的两个三角形。在:before伪元素中，我们首先将其位置定位到了父元素的底部，然后设置了一个边框，两边的长度都为100像素，颜色为透明，而下边的长度为57.74像素，颜色为#39CCCC；:after伪元素与之类似，只不过将其位置定位到了父元素的顶部。

这样，我们就创建了一个六边形。需要注意的是，这个六边形的实际大小并不是我们定义的200像素 x 115.47像素，由于两个三角形的高度都是57.74像素，实际上这个六边形的高度应该加倍，即231像素。

总之，通过上述代码，我们可以轻松地为网站添加漂亮的六边形元素，在页面设计中产生更为丰富有趣的效果。

相关推荐