Bagaimanakah Saya Boleh Mencipta Heksagon dengan Tepi Atas dan Bawah Melengkung Menggunakan CSS?

Mempertingkatkan Heksagon dengan Tepi Atas dan Bawah Melengkung

Untuk menangani isu mencipta heksagon melengkung sepenuhnya menggunakan CSS, mari kita mendalami kod dan fahami cara mengubah suai untuk mencapai kesan yang diingini:

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

Perubahan penting dalam kod ini ialah pengubahsuaian harta jejari sempadan. Pada asalnya, heksagon mempunyai jejari bulat 1em digunakan pada kedua-dua lebar dan tingginya. Dengan mengubahnya kepada 1em / 0.5em, kami mencipta jejari sempadan elips dengan berkesan. Jejari memanjang ini membolehkan kelengkungan tepi atas dan bawah, manakala lebar separuh bulatan kekal malar.

Penjelasan:

Untuk memahami kepentingan pelarasan ini, pertimbangkan bulatan dan elips. Bulatan mempunyai jejari seragam dalam semua arah, manakala elips mempunyai jejari yang berbeza di sepanjang paksinya yang berbeza. Dengan menentukan jejari sempadan sebagai '1em / 0.5em', kami mentakrifkan elips yang jejari mendatarnya ialah 1em (lebar heksagon), dan jejari menegaknya ialah 0.5em (separuh ketinggian heksagon). Ini menghasilkan tepi melengkung di bahagian atas dan bawah heksagon.

CSS lain:

Elemen CSS tambahan mencipta dua elemen pseudo, :before dan : selepas, yang diletakkan secara mutlak di dalam heksagon. Mereka mewarisi lebar, ketinggian, jejari sempadan dan latar belakang heksagon, mewujudkan dua heksagon bertindih yang diputar sebanyak 60 darjah dalam arah bertentangan. Heksagon yang diputar ini mencipta ilusi lengkung licin dan berterusan di sepanjang semua tepi.

Dengan melaksanakan perubahan ini, anda boleh mencapai heksagon dengan tepi melengkung sepenuhnya, menghasilkan bentuk yang lebih menarik dari segi visual dan estetik.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Heksagon dengan Tepi Atas dan Bawah Melengkung Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!