Bagaimana untuk Mencipta Heksagon dengan Imej Latar Belakang Menggunakan CSS?

Heksagon dengan Imej Latar Belakang

Membuat bentuk heksagon dalam HTML dengan CSS adalah agak mudah. Walau bagaimanapun, menambah imej dalam heksagon itu boleh menjadi sedikit lebih mencabar.

Untuk mencapai kesan ini, seseorang boleh memanfaatkan kuasa CSS3 dengan menggunakan sifat transformasi dan limpahan. Dengan menggunakan nilai putaran berbeza dengan limpahan ditetapkan kepada tersembunyi, adalah mungkin untuk mencipta topeng penyemak imbas silang yang membenarkan penambahan imej dalam bentuk heksagon.

Berikut ialah contoh yang menunjukkan cara mencipta heksagon dengan imej latar belakang:

.hexagon-bg {
    width: 100px;
    height: 86.61px;
    margin: auto;
    border-bottom: 20px solid red;
    position: relative;
    overflow: hidden;
}

.hexagon-bg:before {
    content: "";
    width: 100%;
    height: 100%;
    background-image: url(background-image.png);
    transform: rotate(30deg);
    position: absolute;
}

<div class="hexagon-bg">
</div>

Teknik ini mencipta topeng penyemak imbas silang yang membolehkan imej latar belakang yang ditentukan muncul di dalam heksagon bentuk. Adalah penting untuk ambil perhatian bahawa penyemak imbas lama mungkin tidak menyokong fungsi ini, tetapi penyemak imbas moden seperti Chrome, Firefox dan Safari akan memberikan kesan seperti yang dimaksudkan.

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