Bolehkah Heksagon Dicipta Hanya Menggunakan CSS3?

Mencipta Bentuk Heksagon dengan CSS3 Tulen

Soalan:

Bolehkah heksagon dibuat menggunakan CSS3 semata-mata, mereplikasi bentuk yang ditunjukkan dalam yang disediakan imej?

[Image of a hexagon]

Jawapan:

Ya, adalah mungkin untuk mencipta heksagon sedemikian dengan CSS3 tulen. Untuk mencapai matlamat ini, anda boleh menggunakan kod aksara HTML untuk heksagon, seperti berikut:

⬢

Kod ini mewakili aksara unikod untuk heksagon. Sebagai alternatif, anda boleh menggunakan kod CSS berikut untuk memaparkan heksagon:

.hex1::before {
  content: "B22";
  color: orange;
  font-size:135px;
}

.hex2::before {
  content: "B22";
  display:block;
  color: magenta;
  font-size:135px;
  -webkit-transform: rotate(-30deg);
  -moz-transform: rotate(-30deg);
  -o-transform: rotate(-30deg);
  transform: rotate(-30deg);
}

Kod ini menggunakan sifat kandungan yang dijana untuk mencipta bentuk heksagon. Dengan menggunakan ::before pseudo-element, anda boleh memasukkan aksara heksagon sebelum elemen yang ditentukan. Sifat kandungan menetapkan kandungan unsur pseudo kepada aksara unikod heksagon. Anda kemudiannya boleh menyesuaikan saiz, warna dan putaran heksagon menggunakan sifat CSS yang disediakan.

Atas ialah kandungan terperinci Bolehkah Heksagon Dicipta Hanya Menggunakan CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!