如何創建具有完全彎曲邊緣的 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;
}

解：

解決方案：

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

解決方案：

<div>
<p></p>解決方案：解決方案：解決方案：解決方案：解：解：替換原來的CSS與以下：HTML：此方法使用邊框半徑和變換來建立具有彎曲邊緣的六邊形。 </div>

以上是如何創建具有完全彎曲邊緣的 CSS 六邊形？的詳細內容。更多資訊請關注PHP中文網其他相關文章！