How Can I Create Diagonal Lines on a Div Background Using Only CSS?

Drawing Diagonal Lines on a Div Background with Pure CSS

To add the requested diagonal lines to the div background without using images, employ the following CSS solution:

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

This solution utilizes CSS3 linear-gradient with calc() to connect lines, ensuring automatic scaling to the div's dimensions. Using a gradient allows for creating two diagonal lines without the need for additional background images.

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