如何用 CSS 创建一个完全弯曲的六边形？

如何使用 CSS 创建均匀弯曲的六边形

您提供的 CSS 有效地弯曲了六边形的四个边，留下顶部和底部直的。如果您想要完全弯曲的六边形，可以进行以下修改：

在 CSS 代码中，更改以下内容：

#hexagon-circle:before,
#hexagon-circle:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
}

并添加以下内容：

.hex {
  position: relative;
  margin: 1em auto;
  width: 10em;
  height: 17.32em;
  border-radius: 1em/.5em;
  background: orange;
  transition: opacity .5s;
}

.hex:before,
.hex:after {
  position: absolute;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  background: inherit;
  content: '';
}

.hex:before {
  -webkit-transform: rotate(60deg);
  transform: rotate(60deg);
}

.hex:after {
  -webkit-transform: rotate(-60deg);
  transform: rotate(-60deg);
}

这个新代码生成一个六边形，其所有侧面（包括顶部和底部）都具有平滑弯曲的边缘。

以上是如何用 CSS 创建一个完全弯曲的六边形？的详细内容。更多信息请关注PHP中文网其他相关文章！