Estou tentando criar uma forma como na imagem abaixo com umborda inclinada em apenas um lado (por exemplo, o lado inferior) enquanto as outras arestas permanecem retas.

Tentei usar o método border (o código é fornecido abaixo), mas as dimensões da minha forma são dinâmicas e, portanto, não posso usar esse 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>

Também tentei usar gradientes para o plano de fundo (como no código abaixo), mas ele fica bagunçado à medida que as dimensões mudam. Você pode entender o que quero dizer ao passar o mouse sobre a forma no snippet abaixo.

.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>

Como posso criar issoforma com um lado inclinado e também ser capaz de apoiartamanhos dinâmicos?