CSS で完全に曲がった六角形を作成するには?

CSS を使用して均一に湾曲した六角形を作成する方法

提供された CSS は、上部と下部を残したまま、六角形の 4 つのエッジを効果的に湾曲させます。真っ直ぐ。完全に湾曲した六角形が必要な場合は、次の変更を行うことができます:

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 中国語 Web サイトの他の関連記事を参照してください。