0

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

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

1

1 ответ 1

4

Например использовать не треугольник, а подложку с 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>

1
  • 1
    И вправду прекрасное! Благодарю!
    – Anton.M
    17 фев 2021 в 8:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.