How to Create Diagonal Lines in a DIV Background Using Only CSS?

Create Diagonal Lines in DIV Background with CSS

Problem:

Enhance a DIV with a preview box to display diagonal lines in the background, as seen in the accompanying image. The request specifies using CSS only if feasible.

Solution using CSS3 Linear-Gradient:

To automatically scale the lines to the element's dimensions, employ CSS3 linear-gradient combined with calc(). This solution is compatible with various versions of 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>

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