CODEWITHSUNDEEP
htmlcss
jakub1998
jakub1998

Reputation: 410

CSS triangles all across the width of browser

Imagine we have a triangle:

article {
  position: relative;
}

article>.triangle {
  position: absolute;
  left: 0;
  top: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid red;
}
<article>
  <div class="triangle"></div>
</article>

Is it possible to change css to achieve many triangles, which are all across the width of a browser?

Upvotes: 1

Views: 107

Answers (1)

Scath
Scath

Reputation: 3824

You can do it like this and pick whatever color you want the triangles to be:

EDIT: Shortened thanks to Temani Afi's comment.

.triangle {
  height: 30px;
  background-image: 
   linear-gradient(-45deg, transparent 75%, #FF0000 0), 
   linear-gradient(45deg, transparent 75%, #FF0000 0);
  background-size: 40px 40px;
  background-position: 20px 0;
}
<article>
  <div class="triangle"></div>
</article>

Upvotes: 5

Related Questions