Bagaimana untuk Mencipta Heksagon CSS dengan Tepi Melengkung Penuh?

CSS Curved Edge Hexagon

Menggunakan CSS, anda boleh mencipta heksagon dengan tepi melengkung. Walau bagaimanapun, anda mungkin menghadapi masalah apabila tepi atas dan bawah kekal lurus. Berikut ialah penyelesaian untuk menjadikan semua tepi melengkung:

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:

Ganti yang asal CSS dengan 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);
}

HTML:

<div>

Pendekatan ini mencipta heksagon dengan tepi melengkung menggunakan jejari sempadan dan transformasi.

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