draw diagonal lines in div background with CSS

by

Solution that automatically scales to dimensions of an element would be usage of CSS3 linear-gradient connected with calc() as shown below. (There were some issues with Chrome in times of v30+ versions that this answer originally described but looks like they got resolved in the meantime and in v90+ it works as expected).

.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 class="crossed"></textarea>

More Related Contents:

  1. Stretch and scale a CSS image in the background – with CSS only
  2. Transparent arrow/triangle indented over an image
  3. CSS3 background image transition
  4. How can I show only corner borders?
  5. How to get div height to auto-adjust to background size?
  6. CSS triangle custom border color
  7. Wavy shape with css
  8. Invert rounded corner in CSS?
  9. Transparent hollow or cut out circle
  10. How to skew element but keep text normal (unskewed)
  11. How to add border in my clip-path: polygon(); CSS style
  12. Inset border-radius with CSS3
  13. How to make 3-corner-rounded triangle in CSS
  14. Responsive CSS triangle with percents width
  15. Wave (or shape?) with border on CSS3
  16. Triangle shape with background image
  17. How to create a curve on the top of a background?
  18. How to create multi-color border with CSS?
  19. How can I create a “tooltip tail” using pure CSS?
  20. Slanted Corner on CSS box
  21. Segments in a circle using CSS3
  22. CSS Transform Skew [duplicate]
  23. div background color, to change onhover
  24. How to create an irregular square shape in css?
  25. Clip path inset circle?
  26. Filling water animation
  27. Vertically and horizontally centering text in circle in CSS (like iphone notification badge)
  28. Make table cells square
  29. Rounded side, not rounded corners
  30. Creating a droplet like border effect in css

Leave a Comment