Bagaimana untuk Mencipta Anak Panah Chevron dengan Garis Berongga Menggunakan CSS?

Cara Membuat Anak Panah Chevron dengan Garisan Berongga Menggunakan CSS

Teknik untuk mencipta segitiga pepejal menggunakan CSS diketahui secara meluas, tetapi bagaimana anda boleh mencapai anak panah berongga -seperti bentuk sebaliknya?

Satu pendekatan melibatkan penggunaan elemen pseudo (::sebelum atau ::selepas) dan menggunakan gaya CSS tertentu. Sebagai contoh, anda boleh menambah kedua-dua elemen ::before dan ::after untuk mewakili setiap bar anak panah dan gunakan transform: putar untuk meletakkannya dengan betul.

Sebagai alternatif, berikut ialah penyelesaian yang lebih mudah:

Menggunakan Sempadan pada Elemen Pseudo

Tambahkan sempadan pada elemen ::sebelum dan putarkannya menggunakan transformasi: putar:

<code class="css">li::before {
    position: relative;
    content: "";
    display: inline-block;
    width: 0.4em;
    height: 0.4em;
    border-right: 0.2em solid black;
    border-top: 0.2em solid black;
    transform: rotate(45deg);
    margin-right: 0.5em;
}</code>

Penyelesaian Alternatif Menggunakan Elemen Sebenar

Daripada menggunakan elemen pseudo, anda boleh membuat senarai dan menggayakannya dengan CSS:

<code class="css">ul {
    list-style: none;
}

li::before {
    content: ">"; /* Replace with any desired arrow character */
    font-size: 1.5em; /* Adjust font size as needed */
}</code>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Anak Panah Chevron dengan Garis Berongga Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!