Best way to create a div with a full-width slanted line going up

Question

UPDATE: I had previously found a way to accomplish this using CSS, but the slope of the line is jagged and the aspect ratio of the triangle is not consistent for all widths. Here's a Codepen of that solution.

How can I create the effect where the top of the footer slopes upward? Most footers have a simple straight horizontal line along the top of the footer div, but I need to create an effect where the line slopes upward. Here are some different approaches:

PNG image with transparency.
CSS only
SVG

I prefer not to use a PNG image and tried using straight CSS and am now trying it using SVG. The height of the triangular shape should be no more that 200 pixels at the full width of 1440 pixels.

.main {
  background: #ccc;
  }
  .right-triangle {
  display: block;
  }
.footer {
  background: #333;
  color: #fff;
}

<div class="main">End of main section be flush with the div below.</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="right-triangle">
  <polygon points="50 25, 100 100, 0 100" />
</svg>
<div class="footer">
  Next section needs to be flush with the triangle with no gap in between.
</div>

@linnse show us by [edit]ing the question because that works for us. — Robert Longson, Oct 24 '22 at 13:47
Added display:block to SVG. That fixed the gap between the bottom of the triangle and the footer. Thanks for that. Two issues remain, 1) changing the triangle shape so that it's a right triangle that slopes upward and 2) removing all the vertical space above the triangle. — linnse, Oct 24 '22 at 13:54

score 1 · Accepted Answer · answered Oct 25 '22 at 10:48

The code below should do what you want. The key is to set the height and width separately and NOT preserve the aspect ratio for the SVG.

You might need to play with values in the max function to get the narrow screen versus wide screen effects you want. And/or, change max-height to height.

CSS

.main {
    background: #ccc;
}
.right-triangle {
    display: block;
    width: 100%;
    max-height: max(20px, calc(200vw / 1440 ));
}
.footer {
    background: #333; color: #fff;
}

HTML

<div class="main">
End of main section be flush with the div below.</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"
class="right-triangle"
preserveAspectRatio="none">
<polygon points="100 0, 100 100, 0 100" />
</svg>
<div class="footer">
Next section needs to be flush with the triangle with no gap in between.
</div>

(I am on a mobile phone, so, sorry but it is bit difficult posting this how I would like to.)

Thanks. I put this to a test in Codepen https://codepen.io/Codewalker/pen/eYKmmeK?editors=1100 and this works great for all widths. I can use a media query to shorten the height for mobile. However, in my rendering of this in my local dev environment, sometimes I see a faint horizontal border at the bottom of the triangle when I change the viewport for testing, between the triangle and the footer div, which I can't figure out. In that environment, the footer div is display: flex, but I don't think it's that because it seems to randomly render properly and improperly when I change viewports. — linnse, Oct 26 '22 at 11:31
Actually, about the above issue with the line appearing between the divs, it appears to be a Chrome Developer Tools thing. It works fine otherwise. — linnse, Oct 26 '22 at 11:43

Best way to create a div with a full-width slanted line going up

1 Answers1