Bagaimana untuk membuat garis pepenjuru dalam latar belakang DIV hanya menggunakan CSS?

Buat Garisan Diagonal dalam Latar Belakang DIV dengan CSS

Masalah:

Tingkatkan DIV dengan kotak pratonton untuk memaparkan garis pepenjuru di latar belakang, seperti yang dilihat dalam imej yang disertakan. Permintaan menentukan penggunaan CSS hanya jika boleh.

Penyelesaian menggunakan CSS3 Linear-Gradient:

Untuk menskalakan garis secara automatik kepada dimensi elemen, gunakan gabungan kecerunan linear CSS3 dengan calc(). Penyelesaian ini serasi dengan pelbagai versi Chrome:

.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%);
}

<textarea>

Atas ialah kandungan terperinci Bagaimana untuk membuat garis pepenjuru dalam latar belakang DIV hanya menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!