draw diagonal lines in div background with CSS

Question

I have a div for a preview box   HTML    lt div class  preview-content  gt PREVIEW lt  div gt    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

User · Answer

Almost perfect solution  that automatically scales to dimensions of an element would be usage of CSS3 linear-gradient connected with calc   as shown below  Main drawback is of course compatibility  Code below works in Firefox 25 and Explorer 10 and 11  but in Chrome  I ve tested v30 and v32 dev  there are some subtle problems with lines disappearing if they are too narrow  Moreover disappearing depends on the box dimensions     style below works for div   width  100px  height  100px   but fails for div   width  200px  height  200px  for which in my tests 0 8px in calculations needs to be replaced with at least 1 1048507095px for diagonals to be shown and even then line rendering quality is quite poor  Let s hope this Chrome bug will be solved soon    x000D   x000D   crossed   x000D       background   x000D           linear-gradient to top left  x000D               rgba 0 0 0 0  0   x000D               rgba 0 0 0 0  calc 50  - 0 8px   x000D               rgba 0 0 0 1  50   x000D               rgba 0 0 0 0  calc 50    0 8px   x000D               rgba 0 0 0 0  100    x000D           linear-gradient to top right  x000D               rgba 0 0 0 0  0   x000D               rgba 0 0 0 0  calc 50  - 0 8px   x000D               rgba 0 0 0 1  50   x000D               rgba 0 0 0 0  calc 50    0 8px   x000D               rgba 0 0 0 0  100    x000D    x000D   lt textarea class  crossed  gt  lt  textarea gt  x000D   x000D   x000D

User · Answer

x000D   x000D   crossed       width  200px      height  200px      border solid 1px      background-color  rgb 210  137  226       background-image  repeating-linear-gradient        45deg        transparent        transparent 15px         ccc 10px         ccc 20px                  repeating-linear-gradient          135deg          transparent          transparent 15px           ccc 10px           ccc 20px            x000D   lt div class  crossed  gt Hello world lt  div gt  x000D   x000D   x000D

User · Answer

you can use a CSS3 transform Property   div   transform rotate Xdeg   -ms-transform rotate Xdeg      IE 9    -webkit-transform rotate Xdeg      Safari and Chrome        Xdeg   your value  For example     You can make more div and use a z-index property  So make a div with line  and rotate it

User · Answer

An svg dynamic solution for any screen is the following   lt svg xmlns  quot http   www w3 org 2000 svg quot  width  quot 100  quot  height  quot 100  quot  stroke-width  quot 1 quot  stroke  quot  000 quot  gt     lt line x1  quot 0 quot  y1  quot 0 quot  x2  quot 100  quot  y2  quot 100  quot   gt     lt line x1  quot 100  quot  y1  quot 0 quot  x2  quot 0 quot  y2  quot 100  quot   gt   lt  svg gt   And if you want to keep it in background use the position  absolute with top and left 0

User · Answer

intrepidis  answer on this page using a background SVG in CSS has the advantage of scaling nicely to any size or aspect ratio  though the SVG uses  lt path gt s with a fill that doesn t scale so well   I ve just updated the SVG code to use  lt line gt  instead of  lt path gt  and added non-scaling-stroke vector-effect to prevent the strokes scaling with the container    lt svg xmlns  http   www w3 org 2000 svg  version  1 1  preserveAspectRatio  none  viewBox  0 0 100 100  gt     lt line x1  0  y1  0  x2  100  y2  100  stroke  black  vector-effect  non-scaling-stroke   gt     lt line x1  0  y1  100  x2  100  y2  0  stroke  black  vector-effect  non-scaling-stroke   gt   lt  svg gt    Here s that dropped into the CSS from the original answer  with HTML made resizable     x000D   x000D   diag   x000D    background  url  data image svg xml utf8  lt svg xmlns  http   www w3 org 2000 svg  version  1 1  preserveAspectRatio  none  viewBox  0 0 100 100  gt  lt line x1  0  y1  0  x2  100  y2  100  stroke  black  vector-effect  non-scaling-stroke   gt  lt line x1  0  y1  100  x2  100  y2  0  stroke  black  vector-effect  non-scaling-stroke   gt  lt  svg gt     x000D    background-repeat  no-repeat  x000D    background-position  center center  x000D    background-size  100  100   auto  x000D    x000D   lt div class  diag  style  width  200px  height  150px  border  1px solid  resize  both  overflow  auto  gt  lt  div gt  x000D   x000D   x000D

User · Answer

All other answers to this 3-year old question require CSS3  or SVG   However  it can also be done with nothing but lame old CSS2    x000D   x000D   crossed   x000D      position  relative  x000D      width  300px  x000D      height  300px  x000D    x000D   x000D   crossed before   x000D      content      x000D      position  absolute  x000D      left  0  x000D      right  0  x000D      top  1px  x000D      bottom  1px  x000D      border-width  149px  x000D      border-style  solid  x000D      border-color  black white  x000D    x000D   x000D   crossed after   x000D      content      x000D      position  absolute  x000D      left  1px  x000D      right  1px  x000D      top  0  x000D      bottom  0  x000D      border-width  149px  x000D      border-style  solid  x000D      border-color  white transparent  x000D    x000D   lt div class  crossed  gt  lt  div gt  x000D   x000D   x000D    Explanation  as requested   Rather than actually drawing diagonal lines  it occurred to me we can instead color the so-called negative space triangles adjacent to where we want to see these lines  The trick I came up with to accomplish this exploits the fact that multi-colored CSS borders are bevelled diagonally    x000D   x000D   borders   x000D      width  200px  x000D      height  100px  x000D      background-color  black  x000D      border-width  40px  x000D      border-style  solid  x000D      border-color  red blue green yellow  x000D    x000D   lt div class  borders  gt  lt  div gt  x000D   x000D   x000D    To make things fit the way we want  we choose an inner rectangle with dimensions 0 and LINE THICKNESS pixels  and another one with those dimensions reversed    x000D   x000D   r1   width  10px  x000D        height  0  x000D        border-width  40px  x000D        border-style  solid  x000D        border-color  red blue  x000D        margin-bottom  10px    x000D   r2   width  0  x000D        height  10px  x000D        border-width  40px  x000D        border-style  solid  x000D        border-color  blue transparent    x000D   lt div class  r1  gt  lt  div gt  lt div class  r2  gt  lt  div gt  x000D   x000D   x000D    Finally  use the  before and  after pseudo-selectors and position relative absolute as a neat way to insert the borders of both of the above rectangles on top of each other into your HTML element of choice  to produce a diagonal cross  Note that results probably look best with a thin LINE THICKNESS value  such as 1px

User · Answer

I needed to draw arbitrary diagonal lines inside any div  My issue with the other answers posted is that none of them allowed to draw an arbitrary line from point A to point B without doing the trigonometry yourself for the angles  With javascript  amp  CSS you can do this  Hope it s helpful  just specify a pair of points and you re golden    x000D   x000D  const objToStyleString    obj    gt    x000D    const reducer    acc  curr    gt  acc    curr          obj curr          x000D    return Object keys obj  reduce reducer      x000D     x000D   x000D  const lineStyle    xy1  xy2  borderStyle    gt    x000D    const p1    x  xy1 0   y  xy1 1    x000D    const p2    x  xy2 0   y  xy2 1    x000D     x000D    const a   p2 x - p1 x  x000D    const xOffset   p1 x  x000D    const b   p2 y - p1 y  x000D    const yOffset   p1 y  x000D     x000D    const c   Math sqrt a a   b b   x000D     x000D    const ang   Math acos a c   x000D     x000D    const tX1    translateX   -c 2   xOffset px     x000D    const tY1    translateY   yOffset px     x000D    const rot    rotate   ang rad     x000D    const tX2    translateX   c 2 px     x000D    const tY2    translateY   0 px     x000D     x000D    return   x000D       width   Math floor c     px   x000D       height    0px   x000D       border-top   borderStyle  x000D       -webkit-transform   tX1 tY1 rot tX2 tY2  x000D       position    relative   x000D       top    0px   x000D       left    0px   x000D       box-sizing    border-box   x000D       x000D     x000D   x000D  function drawLine parent  p1  p2  borderStyle    x000D    const style   lineStyle p1  p2  borderStyle   x000D    const line   document createElement  div    x000D    line style   objToStyleString style   x000D    parent appendChild line   x000D    x000D   x000D  drawLine container   100 5    25 195    1px dashed purple    x000D  drawLine container   100 100    190 190    1px solid blue    x000D  drawLine container   25 150    175 150    2px solid red    x000D  drawLine container   25 10    175 20    5px dotted green    x000D   container   x000D    background-color   BCBCBC  x000D    width  200px  x000D    height  200px  x000D    padding  0   x000D    margin  0  x000D    x000D   lt div id  container  gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

x000D   x000D   borders   x000D      width  200px  x000D      height  100px  x000D      background-color  black  x000D      border-width  40px  x000D      border-style  solid  x000D      border-color  red blue green yellow  x000D    x000D   lt div class  borders  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You can do it something like this    lt style gt       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         lt  style gt   lt div class  background  gt       lt div class  line1  gt  lt  div gt       lt div class  line2  gt  lt  div gt   lt  div gt    Here is a jsfiddle   Improved version of answer for your purpose

User · Answer

If you d like the cross to be partially transparent  the naive approach would be to make linear-gradient colors semi-transparent  But that doesn t work out good due to the alpha blending at the intersection  producing a differently colored diamond  The solution to this is to leave the colors solid but add transparency to the gradient container instead    x000D   x000D   cross   x000D    position  relative  x000D    x000D   cross  after   x000D    pointer-events  none  x000D    content      x000D    position  absolute  x000D    top  0  bottom  0  left  0  right  0  x000D    x000D   x000D   cross1  after   x000D    background  x000D      linear-gradient to top left  transparent 45   rgba 255 0 0 0 35  46   rgba 255 0 0 0 35  54   transparent 55    x000D      linear-gradient to top right  transparent 45   rgba 255 0 0 0 35  46   rgba 255 0 0 0 35  54   transparent 55    x000D    x000D   x000D   cross2  after   x000D    background  x000D      linear-gradient to top left  transparent 45   rgb 255 0 0  46   rgb 255 0 0  54   transparent 55    x000D      linear-gradient to top right  transparent 45   rgb 255 0 0  46   rgb 255 0 0  54   transparent 55    x000D    opacity  0 35  x000D    x000D   x000D  div   width  180px  text-align  justify  display  inline-block  margin  20px    x000D   lt div class  cross cross1  gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Nullam et dui imperdiet  dapibus augue quis  molestie libero  Cras nisi leo  sollicitudin nec eros vel  finibus laoreet nulla  Ut sit amet leo dui  Praesent rutrum rhoncus mauris ac ornare  Donec in accumsan turpis  pharetra eleifend lorem  Ut vitae aliquet mi  id cursus purus  lt  div gt  x000D   x000D   lt div class  cross cross2  gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Nullam et dui imperdiet  dapibus augue quis  molestie libero  Cras nisi leo  sollicitudin nec eros vel  finibus laoreet nulla  Ut sit amet leo dui  Praesent rutrum rhoncus mauris ac ornare  Donec in accumsan turpis  pharetra eleifend lorem  Ut vitae aliquet mi  id cursus purus  lt  div gt  x000D   x000D   x000D

User · Answer

Here is how I did this using the css clip-path property alongside relative and absolute positioning to create a more fancy cross    x000D   x000D   cross   x000D    width 150px  x000D    height  150px  x000D    border  2px solid  555  x000D    border-radius  5px  x000D    position  relative  x000D    background   efefef  x000D    x000D   x000D   cross  diag1  x000D    position  absolute  x000D    width 100   height 100   x000D    clip-path  polygon 90  0  100  0   10  100   0  100    x000D    background   311B92  x000D    x000D   x000D   cross  diag2  x000D    position  absolute  x000D    width 100   height 100   x000D    clip-path  polygon 0 0  10  0  100  100   90  100    x000D    background   1B5E20  x000D    x000D   lt div class  cross  gt  x000D     lt div class  diag1  gt  lt  div gt  x000D     lt div class  diag2  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Here is a link to the code on codepen if you d like to tweak it

User · Answer

Please check the following    lt canvas id  myCanvas  width  200  height  100  gt  lt  canvas gt   lt div id  mydiv  gt  lt  div gt    JS   var c   document getElementById  myCanvas    var ctx   c getContext  2d    ctx strokeStyle  red   ctx moveTo 0 100   ctx lineTo 200 0   ctx stroke    ctx moveTo 0 0   ctx lineTo 200 100   ctx stroke      CSS   html  body      margin  0    padding  0      myCanvas     padding  0    margin  0    width  200px    height  100px      mydiv     position  absolute    left  0px    right  0    height  102px    width  202px    background  rgba 255 255 255 0     padding  0    margin  0      jsfiddle

User · Answer

You can use SVG to draw the lines    x000D   x000D   diag   x000D      background  url  data image svg xml utf8  lt svg xmlns  http   www w3 org 2000 svg  version  1 1  preserveAspectRatio  none  viewBox  0 0 100 100  gt  lt path d  M1 0 L0 1 L99 100 L100 99  fill  black    gt  lt path d  M0 99 L99 0 L100 1 L1 100  fill  black    gt  lt  svg gt     x000D      background-repeat no-repeat  x000D      background-position center center  x000D      background-size  100  100   auto  x000D    x000D   lt div class  diag  style  width  300px  height  100px   gt  lt  div gt  x000D   x000D   x000D    Have a play here  http   jsfiddle net tyw7vkvm

[css] draw diagonal lines in div background with CSS

Examples related to css

Examples related to background

Examples related to line

Examples related to css-shapes

Examples related to diagonal