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

CSS を使用して六角形のエッジを湾曲させる

提供された CSS コードは、4 つの辺が丸いエッジを持つ六角形を正常に作成します。上端と下端は平らなままです。完全に湾曲した六角形を実現するには、調整が必要です。

元の 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 を使用できます。追加:

.curved-hexagon {
  position: relative;
  width: 100px;
  height: 55px;
  background: red;
  border-radius: 10px 10px 0 0 / 10px 10px 29px 29px;
}

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

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

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

この変更された CSS:

• border-radius プロパティは、上端と下端の曲線を指定するように更新されます。
• 疑似要素のtransformプロパティは不要になったため削除されます。

これにより、次の結果が得られます。上辺と下辺を含むすべての辺が湾曲した六角形です。

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