cssbackgroundlinecss-shapesdiagonal

draw diagonal lines in div background with CSS

I have a div for a preview box:

.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;
}
<div class="preview-content">PREVIEW</div>

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

note: with CSS only if possible

preview

Thank you in advance.

Solution

  • You can do it something like this:

    .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;
}
    <div class="background">
  <div class="line1"></div>
  <div class="line2"></div>
</div>

    Here is a jsfiddle.

    Improved version of answer for your purpose.