Bagaimanakah Saya Boleh Mencipta Corak Heksagon Berulang Menggunakan Hanya CSS3?

Jana corak heksagon berulang dengan CSS3

Ini adalah soalan yang luar biasa yang menyerlahkan keupayaan transformasi CSS3. Penyelesaiannya melibatkan penggunaan elemen div tunggal, dengan div kanak-kanak tambahan membentuk sayap kiri dan kanan heksagon. Imej latar belakang diwarisi, manakala unsur pseudo memutar imej untuk mencipta ilusi heksagon lengkap.

Berikut ialah pecahan teknik:

• Tentukan struktur heksagon awal menggunakan div:
  `
  Hex 1

  
  

  Hex 2

  
  ...
  
  `
• Gunakan blok sebaris dan dimensi set; laraskan jidar untuk jarak yang diingini.
• Heksagon utama:
  `.hexrow > div {
  lebar: 100px;
  tinggi: 173.2px;
  ...}
  `

• Putar "sayap":
  `.hexrow > ; div > div:first-of-type {
  -ms-transform:rotate(60deg);
  -webkit-transform:rotate(60deg);
  ...}

  `.hexrow > div > div:last-of-type {
  -ms-transform:rotate(-60deg);
  -webkit-transform:rotate(-60deg);
  ...`

• Letakkan unsur pseudo untuk mencipta heksagon lengkap:
  `.hexrow > div > div:first-of-type:sebelum {
  -ms-transform:rotate(-60deg) translate(-150px, 0);
  -webkit-transform:rotate(-60deg) translate(-150px, 0 );
  ...}

  `.hexrow > div > div:last-of-type:sebelum {
  -ms-transform:rotate(60deg) translate(100px, 86.6px);
  -webkit-transform:rotate(60deg) translate(100px, 86.6px);
  ...`

• Tambahkan teks pada rentang dalam heksagon.

Teknik ini membolehkan peletakan teks atau imej yang tepat dalam heksagon dengan menyasarkan elemen tertentu dalam bekas "hexrow".

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencipta Corak Heksagon Berulang Menggunakan Hanya CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!