Bagaimana untuk Mencipta Heksagon Lengkung Penuh dengan CSS?-tutorial css-php.cn

Bagaimana untuk Mencipta Heksagon Lengkung Penuh dengan CSS?

Susan Sarandon

Lepaskan： 2024-12-04 07:55:12

asal

379 orang telah melayarinya

How to Create a Fully Curved Hexagon with 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: '';
}

Salin selepas log masuk

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

Salin selepas log masuk

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!