Bagaimana untuk Mencipta Latar Belakang Garisan Diagonal pada DIV menggunakan CSS?

Menambah Garisan Pepenjuru pada Latar Belakang DIV dengan CSS

Soalan:

Bagaimana anda boleh menambah garisan pepenjuru pada latar belakang elemen DIV hanya menggunakan CSS?

Nota: Kesan yang diingini adalah seperti yang ditunjukkan dalam imej yang disediakan.

Penyelesaian:

Untuk melaraskan secara automatik kepada dimensi elemen, gunakan kecerunan linear CSS3 dan fungsi calc(), seperti yang digambarkan di bawah:

.crossed {
     background: 
         linear-gradient(to top left,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 0.8px),
             rgba(0,0,0,1) 50%,
             rgba(0,0,0,0) calc(50% + 0.8px),
             rgba(0,0,0,0) 100%),
         linear-gradient(to top right,
             rgba(0,0,0,0) 0%,
             rgba(0,0,0,0) calc(50% - 0.8px),
             rgba(0,0,0,1) 50%,
             rgba(0,0,0,0) calc(50% + 0.8px),
             rgba(0,0,0,0) 100%);
}

Nota: Contoh HTML akan jadilah:

<textarea class="crossed"></textarea>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Latar Belakang Garisan Diagonal pada DIV menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!