CSS を使用して完全に湾曲したエッジを持つ六角形を作成するにはどうすればよいですか?

CSS を使用して曲線エッジの六角形を作成する

CSS を使用して曲線エッジの六角形を作成するには、次の方法を使用できます。

オリジナルCSSと問題

指定した CSS は、4 辺が曲線状のエッジを持つ六角形を作成し、上端と下端は真っ直ぐのままにします。

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

これらの調整を行うことで、6 つすべてに湾曲したエッジを持つ六角形の形状が作成されます。側面。 border-radius プロパティは湾曲したコーナーを作成し、CSS 変換は完全に湾曲した六角形の錯覚を提供します。

以上がCSS を使用して完全に湾曲したエッジを持つ六角形を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。