Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mencipta Heksagon dengan Tepi Melengkung Penuh Menggunakan CSS?

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

Barbara Streisand
Barbara Streisandasal
2024-12-07 22:50:13452semak imbas

How Can I Create a Hexagon with Fully Curved Edges Using 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn