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:

1. PNG image with transparency.
2. CSS only
3. 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 >End of main section be flush with the div below.</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" >
  <polygon points="50 25, 100 100, 0 100" />
</svg>
<div >
  Next section needs to be flush with the triangle with no gap in between.
</div>

CodePudding user response：

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 >
End of main section be flush with the div below.</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"

preserveAspectRatio="none">
<polygon points="100 0, 100 100, 0 100" />
</svg>
<div >
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.)