Горизонтально отцентрируйте маленький треугольник в нижней части div и измените размер соответственно и пропорционально
С помощью CSS я пытаюсь добиться следующего эффекта, который реагирует на изменение размера экрана (для адаптивного дизайна). В частности, я хочу, чтобы треугольник становился пропорционально меньше, когда окно браузера становилось меньше. Я смоделировал это как PNG (это не HTML / CSS):
До сих пор я использую этот код в качестве основы, с двумя стеками div друг над другом:
CSS:
.pin,kbox {
background-color: #FF8290;
width: 100%;
height: 100px;
}
.greenbox {
background-color: #85D782;
width: 100%;
height: 100px;
}
HTML:
<div class="pinkbox"></div>
<div class="greenbox"></div>