Bagaimana untuk membuat anak panah Chevron berongga dengan CSS?

Membuat Anak panah Chevron dengan CSS

Soalan

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]

Jawapan

Anda boleh mencipta jenis anak panah menggunakan elemen pseudo sebelum atau selepas dengan CSS. Berikut ialah pecahan proses:

• Tambahkan elemen pseudo sebelum atau selepas pada elemen yang anda inginkan.
• Gunakan gaya CSS untuk menyesuaikan penampilan dan kedudukan elemen pseudo.

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:

• Buat atau
  elemen dalam HTML anda.
• Gunakan CSS untuk menggayakan elemen sebagai anak panah, termasuk saiz, warna dan putarannya.

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.