Forma com um lado inclinado (responsivo)
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?