0

Following Situation:

I try to make a Triangle, stick to the left side of my Website

.right_5 {
  margin-top: 0px;
  border-top: 350px solid transparent;
  border-bottom: 380px solid transparent;
  border-left: 350px solid black;
  z-index: 2;
}
<div class="right_5"></div>

And this is the Code, BUT

How do I Make it 100% of the left side? so that the top of the triangle points to the middle of the website?

GMAC
  • 788
  • 4
  • 23
Sn0wF0x
  • 1
  • 1
    Hello Sn)wF0x, welcome to the Stack Overflow. It would be better if you edit your question and post your HTML too. But I am gonna try to help you. Try to use a `float: left` or depending where is this triangle, you could use `position: absolute`, but it is not the best solution. – ARNON Apr 15 '21 at 13:42
  • The height of the triangle, comes from the width of those borders. If you want this to be as high as the _viewport_, then you can use `50vh` for those (one of the values in your example was 380 instead of 350, not sure if that was intentional?); if you want something that adapts to the full page height, you would have to calculate the necessary border widths then. – CBroe Apr 16 '21 at 13:31
  • This method of drawing a triangle always results in a right angle triangle (due to the fact it's actually a left-border being masked by a top/bottom border) It's not possible to have it cover the entire left side and point at the horizontal centre of the screen (assuming a responsive page size) using this method. – DBS Apr 16 '21 at 13:31

0 Answers0