Bagaimana untuk Mencipta Heksagon dengan Sempadan Berwarna dan Garis Besar?

Mencipta Heksagon dengan Sempadan dan Garis Besar

Apabila membuat bentuk heksagon menggunakan jidar melalui unsur pseudo, menggabungkan secara langsung warna yang berbeza untuk isian dan garis besar terbukti mencabar. Walau bagaimanapun, terdapat alternatif yang berdaya maju: menindih heksagon dalam heksagon.

Contoh:

[Imej: Contoh heksagon dengan garis besar berwarna]

Contoh Langsung:

[Pautan ke contoh heksagon langsung]

HTML:

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

CSS:

Tapak Heksagon:

<code class="css">.hex {
    margin-top: 70px;
    width: 208px;
    height: 120px;
    background: #6C6;
    position: relative;
}
.hex:before, .hex:after {
    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;
}</code>

Heksagon Dalam:

<code class="css">.hex.inner {
    background-color: blue;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    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 {
    background-color: red;
    -webkit-transform: scale(.8, .8);
    -moz-transform: scale(.8, .8);
    transform: scale(.8, .8);
    z-index: 2;
}
.hex.inner2:before {
    border-bottom: 60px solid red;
}
.hex.inner2:after {
    border-top: 60px solid red;
}</code>

Dengan menindih heksagon berlainan warna , pendekatan ini mencapai kesan heksagon yang diingini dengan jidar berwarna dan warna isian yang berbeza.

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