How to Create a Diagonal Line Background on a DIV using CSS?

Adding Diagonal Lines to a DIV Background with CSS

Question:

How can you add diagonal lines to the background of a DIV element using only CSS?

Note: The desired effect is as shown in the provided image.

Solution:

To automatically adjust to the element's dimensions, utilize CSS3 linear-gradient and the calc() function, as illustrated below:

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

Note: An HTML example would be:

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

The above is the detailed content of How to Create a Diagonal Line Background on a DIV using CSS?. For more information, please follow other related articles on the PHP Chinese website!