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

My solution is inspired by the one called Method 7 - Viewport Units by Andrea Ligios, above in this page.

I used the "horizontal" unit for the height too (height:10vw) to keep the given proportions in the trapezoid when resizing the width of the navigation window. We could call this Method 7b - Viewport Width.

Further, using two nested divs, instead of one and the :after selector, allows a better tuning of the text content styles, in my opinion (e.g. text-align, etc.).

.dtrapz {
  position: relative;
  margin: 10px 40vw;
  width: 0;
  height: 10vw;
  border: none;
  border-right: 20vw solid #f22;
  border-bottom: 5vw solid transparent;
}

.dtcont {
  position: absolute;
  width: 20vw;
  height: 10vw;
  text-align: center;
  color: #fff;/* just aesthetic */
}

  
Some content