CSS を使用して上端と下端が湾曲した六角形を作成するにはどうすればよいですか?

湾曲した上端と下端で六角形を強化する

CSS を使用して完全に湾曲した六角形を作成する問題に対処するために、コードを詳しく調べて変更方法を理解しましょう。望ましい効果を達成するためにそれを行います:

.hex {
  position: relative;
  margin: 1em auto;
  width: 10em;
  height: 17.32em;
  border-radius: 1em / 0.5em;  <!-- Border radius modification -->
  background: orange;
  transition: opacity .5s;
}

このコードの重要な変更は、次の変更です。 border-radius プロパティ。元々、六角形の幅と高さの両方に 1em の円半径が適用されていました。これを 1em / 0.5em に変更すると、効果的に楕円形の境界半径が作成されます。この細長い半径により、半円の幅は一定のまま、上端と下端の曲率が考慮されます。

説明:

の重要性を理解するにはこの調整では、円と楕円を考慮します。円は全方向に均一な半径を持ちますが、楕円は異なる軸に沿って異なる半径を持ちます。 border-radius を「1em / 0.5em」と指定することで、水平半径が 1em (六角形の幅)、垂直半径が 0.5em (六角形の高さの半分) である楕円を定義します。これにより、六角形の上部と下部に湾曲したエッジが作成されます。

その他の CSS:

追加の CSS 要素により、2 つの疑似要素、:before と : が作成されます。後は、六角形の内側に絶対的に配置されます。これらは六角形の幅、高さ、境界半径、および背景を継承し、反対方向に 60 度回転された 2 つの重なり合う六角形を作成します。これらの回転した六角形は、すべてのエッジに沿って滑らかで連続した曲線の錯覚を作成します。

これらの変更を実装することで、完全に湾曲したエッジを持つ六角形を実現でき、より視覚的に魅力的で審美的な形状が得られます。

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