По желанию заказчика, перехожу на новый стиль - должен быть полупрозрачный фон у названии статьи (на фоне изображения) с полупрозрачным треугольником в начале.
К сожалению, никак не получается выполнить зависимость размера блока inform-block-triangle в зависимости от размера самого inform-block - все описанные в глобальной сети способы завязаны на статичный размер div'a.
Прошу подсказать как решить данную проблему. Благодарю.
Полный код - https://codepen.io/antonmsbor/pen/WNojZve
body {
background: blue;
}
.inform-header {
min-height: 240px;
height: 18vw;
max-height: 400px
position: relative;
}
.inform-block {
position: absolute;
bottom: 0;
padding: 0 100px;
}
.inform-block-triangle {
float: left;
width: 0;
height: 0;
border-bottom: 78px solid rgba(256,256,256, 0.8);
border-left: 78px solid transparent;
}
.inform-name {
float: left;
padding: 20px;
padding-right: 20vw;
background: linear-gradient(to right, rgba(256,256,256, 0.8), transparent);
}
<div class="inform-header">
<div class="inform-block">
<div class="inform-block-triangle">
</div>
<div class="inform-name">
<span>Простой текст названия статьи</span>
</div>
</div>
</div>