Shape with a slanted side (responsive)

Question

I am trying to create a shape like in the image below with a slanted edge on only one side (for example, the bottom side) while the other edges remain strai

Answer 1

I tried using the border method but the dimensions of my shape are dynamic and hence I cannot use this method.

---

Method 7 - Viewport Units ^{(Border Redux)}

(Browser Compatibility)

Viewport Units are a great innovation in CSS3. While you can usually use percentage values to dynamize your properties, you can't do it for border-widths (nor for font-sizes).

With Viewport Units instead you can dynamically set your border widths, along with the sizes of your objects, compared to the viewport dimension.

_{Note: percentage values are referred to the parent object, not to the viewport (visible area of the window).}

To test the method, launch the following snippet Full Page and resize it both horizontally and vertically.

.shape {
    position: relative;
    height: 20vh;
    width: 40vw;
    background: tomato;
}
.shape:after {
    position: absolute;
    content: '';
    left: 0px;
    right: 0px;
    top: 20vh;
    border-width: 10vh 20vw;
    border-style: solid;
    border-color: tomato tomato rgba(0,0,0,0) rgba(0,0,0,0);
}

Some content

Pros - (1) Everything is dynamic, browser coverage is wide.

Cons - (1) You should pay attention at how your OS handles the scrollbar with overflow: auto;.