Bagaimana Anda Boleh Mencipta Bentuk Heksagon dengan Sempadan Menggunakan CSS?

Bentuk Heksagon dengan Sempadan dan Garis Besar

Mencipta bentuk heksagon menggunakan unsur pseudo CSS ialah teknik yang mantap. Walau bagaimanapun, menambah secara terus jidar dengan warna yang berbeza boleh mencabar. Artikel ini meneroka pendekatan alternatif untuk mencapai kesan yang diingini.

Dengan menindih berbilang heksagon dengan saiz dan warna yang berbeza-beza, adalah mungkin untuk mencipta ilusi heksagon bersempadan sambil mengekalkan isian warna yang diingini.

Contoh Pelaksanaan

HTML:

<div class="hex">
    <div class="hex inner">
        <div class="hex inner2"></div>
    </div>
</div>

CSS:

.hex {
    ...  /* Hexagon shape and basic styles */
}

.hex inner {
    background-color: blue;
    ...  /* Transform and scaling */
}

.hex inner2 {
    background-color: red;
    ...  /* Transform and scaling */
}

Prinsip Kerja:

Elemen .hex paling luar mentakrifkan bentuk dan warna heksagon asas. Di dalamnya, dua elemen .hex bersarang ditambah, setiap satu dengan warna latar belakang yang berbeza. Menskala elemen dalam ini secara berkadar menggunakan transform: scale() mengecilkannya sambil mengekalkan bentuk heksagon. Hasilnya ialah tindanan heksagon berlainan warna, menghasilkan rupa heksagon bersempadan.

Contoh Langsung:

[Contoh Heksagon](https://www. example.com/hexagon-example/)

Alternatif:

Jika imej bukan pilihan, teknik alternatif lain termasuk SVG, Kanvas atau menggunakan sifat topeng CSS .

Atas ialah kandungan terperinci Bagaimana Anda Boleh Mencipta Bentuk Heksagon dengan Sempadan Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!