Как использовать clip-path и показывать содержимое под ним ⇐ CSS

[Anonymous]

Я хотел бы создать элемент, как показано на изображении ниже.


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

Код: Выделить всё

body {
background: black;
}

.element {
width: 300px;
height: 400px;
position: relative;
border-radius: 4px;
overflow: hidden;
display: flex;
justify-content: center;
align-items: end;
}

.triangle {
width: 48px;
height: 24px;
z-index: 20;
background: black;
clip-path: polygon(50% 100%, 0 0, 100% 0);
}

.image {
position: absolute;
object-fit: cover;
width: 100%;
height: 100%;
}

Код: Выделить всё

[img]https://images.pexels.com/photos/14616449/pexels-photo-14616449.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1[/img]

Я предполагаю, что я мог бы также определить форму для всего элемента и применить clip-path, но элемент должен быть отзывчивым, и я не уверен, что с этим будет работать жестко запрограммированный путь.
Буду признателен за любую помощь

Подробнее здесь: https://stackoverflow.com/questions/784 ... nt-beneath