Bagaimanakah Saya Boleh Mencipta Heksagon Lengkung Penuh Menggunakan CSS?

Membengkokkan Tepi Heksagon Menggunakan CSS

Kod CSS yang disediakan berjaya mencipta heksagon dengan tepi bulat pada empat sisi, namun, tepi atas dan bawah kekal rata. Untuk mencapai heksagon melengkung sepenuhnya, pelarasan diperlukan.

CSS Asal:

#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;
}

Penyelesaian:

Kepada lengkung tepi atas dan bawah heksagon, CSS berikut boleh ditambah:

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

Dalam CSS yang diubah suai ini:

• Sifat jejari sempadan dikemas kini untuk menentukan lengkung pada tepi atas dan bawah.
• The sifat transformasi pada unsur pseudo dialih keluar, kerana ia tidak diperlukan lagi.

Ini akan mengakibatkan heksagon di mana semua tepi melengkung, termasuk tepi atas dan bawah.

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