Bagaimana untuk Mencipta Heksagon Lengkung Penuh dengan CSS?

Cara Membuat Heksagon Lengkung Seragam Menggunakan CSS

CSS yang anda sediakan secara berkesan melengkung empat tepi heksagon, meninggalkan bahagian atas dan bawah lurus. Jika anda inginkan heksagon melengkung sepenuhnya, pengubahsuaian berikut boleh dibuat:

Dalam kod CSS, tukar yang berikut:

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

Dan tambahkan yang berikut:

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

Kod baharu ini menjana bentuk heksagon dengan tepi melengkung lancar pada semua sisi, termasuk bahagian atas dan bawah.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Heksagon Lengkung Penuh dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!