"Резиновый" треугольник в зависимости от высоты div

Question

По желанию заказчика, перехожу на новый стиль - должен быть полупрозрачный фон у названии статьи (на фоне изображения) с полупрозрачным треугольником в начале. Пример

К сожалению, никак не получается выполнить зависимость размера блока 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>

Answer 1

Например использовать не треугольник, а подложку с transform: skew(-20deg);:

.inform-header {
  background: url(https://etu.ru/assets/cache/images/ru/nauchnaya/novosti/1280x800-mediatech.e79.jpg) 100% 100%;
  min-height: 240px;
  height: 18vw;
  max-height: 400px;
  background-size: cover;
  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;
  overflow: hidden;
}

.inform-name {
  float: left;
  padding: 20px;
  padding-right: 20vw;
  
  position: relative;
}

.inform-name:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(to right, rgba(256,256,256, 0.8), transparent);
  transform: skew(-20deg);
}

.inform-name span {
 font-size: 2vw;
 color: #025EA2;
 font-weight: 500;
  position: relative;
  z-index: 3;
}

@media screen and (max-width: 650px) {
  .inform-name-triangle {
    display: none;
  }
}

<div class="inform-header">
  <div class="inform-block">
    <div class="inform-name">
      <span>Простой текст названия статьи</span>
    </div>  
  </div>
</div>

БЛОГ НА HUSL

"Резиновый" треугольник в зависимости от высоты div

Ответы (1 шт):