Estoy tratando de crear una forma como en la imagen de abajo con unborde inclinado en un solo lado (por ejemplo, el lado inferior) mientras que los otros bordes permanecen rectos.

Intenté usar el método de borde (el código se proporciona a continuación) pero las dimensiones de mi forma son dinámicas y, por lo tanto, no puedo usar este método.

.shape {
    position: relative;
    height: 100px;
    width: 200px;
    background: tomato;
}
.shape:after {
    position: absolute;
    content: '';
    height: 0px;
    width: 0px;
    left: 0px;
    bottom: -100px;
    border-width: 50px 100px;
    border-style: solid;
    border-color: tomato tomato transparent transparent;
}

<div class="shape">
    Some content
</div>

También he intentado usar gradientes para el fondo (como en el código a continuación) pero se ensucia a medida que cambian las dimensiones. Puedes ver lo que quiero decir al pasar el cursor sobre la forma en el fragmento de abajo.

.gradient {
  display: inline-block;
  vertical-align: top;
  height: 200px;
  width: 100px;
  margin: 10px;
  color: beige;
  transition: all 1s;
  padding: 10px;
  background: linear-gradient(45deg, transparent 45%, tomato 45%) no-repeat;
}
.gradient:hover {
  width: 200px;
}

<div class="gradient"></div>

¿Cómo puedo crear esto?forma con un lado inclinado y también poder apoyartamaños dinámicos?