Ich versuche, eine Form wie im Bild unten mit einem @ zu erstellebgeschrägte Kante nur auf einer Sei (zum Beispiel die Unterseite), während die anderen Kanten gerade bleiben.

Ich habe versucht, die Rahmenmethode zu verwenden (Code wird unten angegeben), aber die Abmessungen meiner Form sind dynamisch und daher kann ich diese Methode nicht verwenden.

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

Ich habe auch versucht, Farbverläufe für den Hintergrund zu verwenden (wie im folgenden Code), aber es wird durcheinander gebracht, wenn sich die Abmessungen ändern. Sie können sehen, was ich meine, indem Sie mit der Maus über die Form im folgenden Ausschnitt schweben.

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

Wie kann ich das erstellenShape mit einer schrägen Seite und auch in der Lage sein, @ zu unterstützdynamische Größen?