Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat anak panah Chevron berongga dengan CSS?
Menggunakan CSS, anda boleh membuat segi tiga yang diisi dengan mudah, seperti yang ditunjukkan oleh coretan kod di bawah:
<code class="css">#triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; }</code>
Tetapi bagaimana anda mencipta segi tiga berongga seperti anak panah, seperti yang digambarkan dalam imej di bawah?
[Imej anak panah chevron]
Anda boleh mencipta jenis anak panah menggunakan elemen pseudo sebelum atau selepas dengan CSS. Berikut ialah pecahan proses:
Sebagai contoh, anda boleh menggunakan CSS berikut:
<code class="css">::before { content: ""; position: absolute; width: 0.5em; height: 0.5em; border-top: 1px solid black; border-right: 1px solid black; transform: rotate(45deg); margin-right: 0.5em; }</code>
CSS ini mencipta segi tiga berongga dengan garis besar hitam, diputar 45 darjah. Anda boleh melaraskan sifat lebar, tinggi dan sempadan untuk menyesuaikan penampilan.
Sebagai alternatif, anda juga boleh mencapai kesan ini tanpa menggunakan unsur pseudo:
Berikut ialah contoh:
<code class="css">.chevron { display: inline-block; width: 0.5em; height: 0.5em; border-top: 1px solid black; border-right: 1px solid black; transform: rotate(45deg); margin-right: 0.5em; }</code>
Dalam kes ini, anda boleh menambah kelas .chevron pada elemen yang anda inginkan untuk mencipta kesan anak panah.
Atas ialah kandungan terperinci Bagaimana untuk membuat anak panah Chevron berongga dengan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!