如何使用 CSS 创建具有完全弯曲边缘的六边形？-css教程-PHP中文网

如何使用 CSS 创建具有完全弯曲边缘的六边形？

Barbara Streisand

发布： 2024-12-07 22:50:13

原创

418 人浏览过

How Can I Create a Hexagon with Fully Curved Edges Using CSS?

使用 CSS 创建曲边六边形

要使用 CSS 创建曲边六边形，您可以采用以下策略：

原始 CSS 和问题

您提供的 CSS 创建了一个四边弯曲的六边形，使顶部和底部边缘保持直线。

#hexagon-circle {
    width: 100px;
    height: 55px;
    background: red;
    position: relative;
    border-radius: 10px;
}
#hexagon-circle:before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 29px solid red;
    border-radius: 10px;
}
#hexagon-circle:after {
    content: "";
    position: absolute;
    bottom: -25px;
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 29px solid red;
    border-radius: 10px;
}

登录后复制

解决方案：使用 CSS 转换

要弯曲六边形的顶部和底部边缘，您可以使用 CSS 转换来旋转整个60 度的六角形。通过将此旋转应用于六边形及其伪元素，您可以创建平滑、弯曲的六边形的错觉。

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

登录后复制

通过进行这些调整，您可以创建一个在所有六个上都具有弯曲边缘的六边形形状双方。 border-radius 属性创建弯曲的角，而 CSS 转换提供完全弯曲的六边形的错觉。

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