Bagaimana untuk Mencipta Heksagon dengan Sempadan dan Isi Menggunakan Tindanan CSS?

Mencipta Heksagon dengan Sempadan dan Isi

Heksagon biasanya dibuat menggunakan sempadan CSS melalui unsur pseudo. Walaupun tidak mungkin untuk mengisi heksagon dengan satu warna dan menggariskannya dengan warna lain, pendekatan alternatif ialah bertindih berbilang heksagon dalam satu sama lain.

Kaedah Tindanan

Dengan menindih heksagon, anda boleh mencapai kesan yang diingini tanpa bergantung pada imej. Contoh berikut menunjukkan kaedah ini:

HTML:

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

CSS:

<code class="css">.hex {
    /* Define shape, size, and colors */
    margin-top: 70px;
    width: 208px;
    height: 120px;
    background: #6C6;
    position: relative;
}

.hex:before, .hex:after {
    /* Create hexagon shape */
    content: "";
    border-left: 104px solid transparent;
    border-right: 104px solid transparent;
    position: absolute;
}

.hex:before {
    top: -59px;
    border-bottom: 60px solid #6C6;
}

.hex:after {
    bottom: -59px;
    border-top: 60px solid #6C6;
}

.hex.inner {
    /* Style inner hexagon */
    background-color: blue;
    transform: scale(.8, .8);
    z-index: 1;
}

.hex.inner:before {
    border-bottom: 60px solid blue;
}

.hex.inner:after {
    border-top: 60px solid blue;
}

.hex.inner2 {
    /* Style innermost hexagon */
    background-color: red;
    transform: scale(.8, .8);
    z-index: 2;
}

.hex.inner2:before {
    border-bottom: 60px solid red;
}

.hex.inner2:after {
    border-top: 60px solid red;
}</code>

Kod ini mencipta tiga heksagon bertindih, setiap satu dengan warna dan indeks z yang berbeza nilai. Sifat transform: scale() digunakan untuk mengurangkan dimensi unsur dalam secara berkadar, mewujudkan kesan berlapis.

Contoh Langsung

Anda boleh melihat contoh langsung teknik ini di sini: [Contoh Sempadan Heksagon dan Isian](https://codepen.io/username/pen/wveBJp)

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