draw diagonal lines in div background with CSS

Question

I have a div for a preview box:

HTML:

<div class="preview-content">PREVIEW</div> 

CSS:

.preview-content {     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat;     width: 100%;     min-height: 300px;     max-height: 300px;     line-height: 300px;     text-align: center;     vertical-align: middle;      font-size: 2em; } 

Question: how to add diagonal lines to div background like in the picture?

note: with CSS only if possible

Thank you in advance.

Answer 1

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>

Answer 2

You can do it something like this:

<style>     .background {         background-color: #BCBCBC;         width: 100px;         height: 50px;         padding: 0;          margin: 0     }     .line1 {         width: 112px;         height: 47px;         border-bottom: 1px solid red;         -webkit-transform:             translateY(-20px)             translateX(5px)             rotate(27deg);          position: absolute;         /* top: -20px; */     }     .line2 {         width: 112px;         height: 47px;         border-bottom: 1px solid green;         -webkit-transform:             translateY(20px)             translateX(5px)             rotate(-26deg);         position: absolute;         top: -33px;         left: -13px;     } </style> <div class="background">     <div class="line1"></div>     <div class="line2"></div> </div> 

Here is a jsfiddle.

Improved version of answer for your purpose.