Bagaimanakah Saya Boleh Mencipta Heksagon dengan Tepi Melengkung Penuh Menggunakan CSS?

Mencipta Heksagon Bermata Lengkung dengan CSS

Untuk mencipta heksagon tepi melengkung menggunakan CSS, anda boleh menggunakan strategi berikut:

CSS asal dan Isu

CSS yang anda berikan menghasilkan heksagon dengan tepi melengkung pada empat sisi, meninggalkan tepi atas dan bawah lurus.

#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: Menggunakan Transformasi CSS

Untuk melengkung tepi atas dan bawah heksagon, anda boleh menggunakan CSS transformasi untuk memutarkan keseluruhan heksagon sebanyak 60 darjah. Dengan menggunakan putaran ini pada kedua-dua heksagon dan elemen pseudonya, anda mencipta ilusi heksagon licin melengkung.

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

Dengan membuat pelarasan ini, anda mencipta bentuk heksagon dengan tepi melengkung pada kesemua enam sisi. Sifat jejari sempadan mencipta sudut melengkung, manakala transformasi CSS memberikan ilusi heksagon melengkung sepenuhnya.

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