Я пытаюсь создать форму, как на изображении ниже снаклонный край только с одной стороны (например, нижняя сторона), в то время как другие края остаются прямыми.

Я попытался использовать метод border (код приведен ниже), но размеры моей фигуры являются динамическими, и, следовательно, я не могу использовать этот метод.

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

Я также пытался использовать градиенты для фона (как в приведенном ниже коде), но он портится при изменении размеров. Чтобы понять, что я имею в виду, наведите курсор на фигуру в следующем фрагменте.

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

Как я могу создать этоформа со скошенной стороной а также сможет поддержатьдинамические размеры?