CODEWITHSUNDEEP
htmlcsscss-shapes
Web R
Web R

Reputation: 575

Parallel diagonal lines on background

I want to draw 2 parallel diagonal lines on the background of my div.
Please see my table here:

body {
  background-image: url("http://i.imgur.com/TnPgXl4.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 40px;
}
#table {
  width: 800px;
  height: 300px;
  background-color: transparent;
  border: solid 1px white;
}
<div id="table"></div>

I want to achieve something like this:

Div with 2 diagonal lines on background

Upvotes: 6

Views: 2128

Answers (4)

Persijn
Persijn

Reputation: 14990

Svg

You could use an svg element and span the svg to your div.

body {
  background-color: #222;
  margin: 20px;
}
.container {
  width: 100%;
  height: 150px;
  border: 2px solid white;
}
.container svg {
  width: 100%;
  height: 100%;
}
<div class="container">
  <svg viewBox="0 0 100 100">
    <line stroke="white" x1="47" x2="57" y1="100" y2="0" />
    <line stroke="white" x1="57" x2="67" y1="100" y2="0" />
  </svg>
</div>

Upvotes: 3

web-tiki
web-tiki

Reputation: 103750

You can achieve the 2 diagonal lines with a rotated pseudo element. The 2 lines are the top and bottom borders of the absolutely positioned pseudo element:

body {
  background-image: url("http://i.imgur.com/TnPgXl4.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 40px;
}
#table {
  position: relative;
  width: 800px; height: 300px;
  background-color: transparent;
  border: solid 1px white;
  overflow: hidden;
}
#table:before {
  content: '';
  position: absolute;
  right: 30%; bottom: 100%;
  height: 20px; width: 100%;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform-origin: 100% 100%;
  transform: rotate(-70deg);
}
<div id="table"></div>

This is how this works :

  • the width between the 2 lines is controled by the height of the pseudo element
  • the thickness of the lines is controled by the border-width
  • the slant of the lines is controled by the rotation angle
  • the overflowing parts of the lines are hidden with the overflow:hidden; property on the div

Note that you need to add vendor prefixes to the transform and transform origin properties for browser support and you probably don't need the vendor prefixes on the background-size property:

Upvotes: 4

Stewartside
Stewartside

Reputation: 20905

An alternative to wek-tiki and Nenad Vracar's answers would be to use the skewX() CSS transform.

This solution won't require you to hide anything that overflows the edge and therefore adds a little more flexibility.

body {
  background-image: url("http://i.imgur.com/TnPgXl4.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  padding: 40px;
}
#table {
  position: relative;
  width: 800px;
  height: 300px;
  background-color: transparent;
  border: solid 1px white;
}
#table:before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: 20px;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  transform-origin: 100% 100%;
  transform: skewX(-20deg);
}
<div id="table"></div>

Upvotes: 3

Nenad Vracar
Nenad Vracar

Reputation: 122027

You can do this with :after and :before pseudo elemnts and trasform: rotate()

body {
  background-image: url("http://www.planwallpaper.com/static/images/cool-background.jpg");
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
   background-size: cover;
   background-repeat: no-repeat;
   padding:40px;
}

#table {
  width: 70%;
  height: 300px;
  background-color: transparent;
  border: solid 1px white;
  margin: 0 auto;
  position: relative;
  box-sizing: border-box;
}

#table:before, #table:after {
  content: "";
  position: absolute;
  left: 60%;
  height: 102%;
  border-left: 1px solid white;
  transform: rotate(10deg);
  transform-origin: top;
}

#table:after {
  left: 65%;
}
<div id="table"></div>

Upvotes: 3

Related Questions