Не могу поместить изображение в треугольник [дубликат] ⇐ CSS

[Anonymous]

Я создаю приложение Next.Js и хочу, чтобы на одной из моих страниц было изображение в форме треугольника. Я могу нарисовать треугольник, но не вижу изображения.
Мое изображение находится в моем общедоступном каталоге. Я использую Next App Router.
Вот мой CSS
.expertise-content {
position: relative;
}

.image-section {
position: relative;
height: 200px;
}

.triangle-image {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 200px solid transparent;
transform: rotate(-90deg);
background-image: url('/Water-Engineer-Clipboard.jpg');
background-size: cover;
background-position: center;
}

Я импортирую имя класса CSS в свой компонент следующим образом:
[*]






Подробнее здесь: https://stackoverflow.com/questions/787 ... a-triangle