Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Mencipta Corak Heksagon Berulang Menggunakan Hanya CSS3?

Bagaimanakah Saya Boleh Mencipta Corak Heksagon Berulang Menggunakan Hanya CSS3?

Susan Sarandon
Susan Sarandonasal
2024-11-30 09:53:11744semak imbas

How Can I Create Repeating Hexagonal Patterns Using Only 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!

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