Форма со скошенной стороной (отзывчивый)
Я пытаюсь создать форму, как на изображении ниже снаклонный край только с одной стороны (например, нижняя сторона), в то время как другие края остаются прямыми.
Я попытался использовать метод 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>
Как я могу создать этоформа со скошенной стороной а также сможет поддержатьдинамические размеры?