VAShcherbakov
@VAShcherbakov
Новичек!

Как сделать треугольник у блока в цвет блока, если background изображение?

Подскажите, как сделать треугольник у блока в цвет блока, если background изображение? Уже всю голову сломал!

5c234e356b035907963224.png
/* CSS */
/* Добавление отступов к элементу с классом timeline */
.timeline {
  padding-top: 1rem;
  padding-bottom: 1rem;
  position: relative;
}
/* Создание вертикальной линии с помощью псевдоэлеметна */
.timeline::before {
  content: "";
  position: absolute;
  width: .125rem;
  height: 100%;
  background-color: #dee2e6;
  left: 2rem;
  top: 0;
}
/* добавление нижнего отступа и левого поля для элементов с классом timeline-wrapper */
.timeline-wrapper {
  margin-bottom: 1rem;
  padding-left: 4rem;
}
/* убирание у последнего элемента .timeline-wrapper нижнего отступа */
.timeline-wrapper:last-child {
  margin-bottom: 0;
}
/* стили для элементов таймлайна */
.timeline-item {
  position: relative;
  background-color: #eeeeee;
  color: #000;
  padding: .825rem;
  border-radius: .25rem;
}
/* добавление контрольных точек на вертикальную линию */
.timeline-item::before {
  content: "";
  position: absolute;
  width: .75rem;
  height: .75rem;
  background-color: #000000;
  border-radius: .4rem;
  left: -2.3125rem;
  top: 50%;
  transform: translateY(-50%);
}
/* добавление стрелочек к элементам таймлайна */
.timeline-item::after {
  content: "";  
  position: absolute;
  width: 0;
  height: 0;
  border-top: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
  border-right: 1rem solid #eeeeee;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
}
/* стили для блока, в котором будет отображаться название статьи */
.timeline-item-header {
  display: block;
  font-weight: bold;
  font-size: 1.125rem;
}
.timeline-item-header span {
  background-color: rgba(238,238,238,.8);
  padding: .3rem;
}
/* оформление блока, содержащего название раздела */
.timeline-item-section {
  position: absolute;
  top: 0;
  right: 0;
  background-color: rgba(238,238,238,.8);
  padding: .3rem;
  font-size: .875rem;
  border-top-right-radius: .25rem;
}
/* оформление блока, содержащего дату */
.timeline-item-date {

  font-size: .75rem;
  line-height: 2;
  color: #000;
  background-color: rgba(238,238,238,.8);
  padding: .3rem;
}
/* стили для блока, в который будет выводиться описание статьи */
.timeline-item-description {

  font-size: .875rem;
  color: #000;
  line-height: 1.7;
  background-color: rgba(238,238,238,.8);
  padding: .3rem;
}

/* для адаптивности (стили для больших экранов) */
@media (min-width: 576px) {
  /* для вывода вертикальной линии по центру */
  .timeline::before {
    left: 50%;
  }
  /* стили для нечётных элементов с классом timeline-wrapper */
  .timeline-wrapper:nth-child(odd) {
    padding-right: 2rem;
    padding-left: 15px;
  }
  /* стили для чётных элементов с классом timeline-wrapper */
  .timeline-wrapper:nth-child(even) {
    padding-left: 2rem;
    margin-left: 50%;
    margin-top: -2rem;
  }
  /* дополнительный сдвиг вверх для нечетных элементов (начиная с 3) */
  .timeline-wrapper:nth-child(2n+3) {
    margin-top: -2rem;
  }
  /* стили для псевдоэлементов ::before элементов таймлайна, расположенных в нечётных контейнерах */  
  .timeline-wrapper:nth-child(odd) .timeline-item::before {
    right: -2.5rem;
    left: unset;
  }
  /* стили для псевдоэлементов ::after элементов таймлайна, расположенных в нечётных контейнерах */
  .timeline-wrapper:nth-child(odd) .timeline-item::after {
    border-left: 1rem solid #eeeeee;
    border-right: none;
    left: unset;
    right: -1rem;
  }
}


<section class="timeline">
  
<div class="row">
  <!-- 1 элемент -->
  <div class="col-12 col-sm-6 timeline-wrapper">
    <div class="timeline-item" style="background: url(../images/product/15447861721.jpeg) no-repeat center;">
      <span class="timeline-item-section"><i class="fas fa-map-marker-alt"></i> Санкт-Петербург</span>
      <span class="timeline-item-date">07.05.2018</span>
      <p class="my-2 p-0 timeline-item-header"><span>НАЗВАНИЕ СТАТЬИ</span></p>
      <span class="timeline-item-description">Детальное описание статьи</span>
    </div>
  </div>
  <!-- 2 элемент -->
  <div class="col-12 col-sm-6 timeline-wrapper">
    <div class="timeline-item">
      <span class="timeline-item-section"><i class="fas fa-map-marker-alt"></i> Москва</span>
      <span class="timeline-item-date">25.04.2018</span>
      <span class="timeline-item-header">НАЗВАНИЕ СТАТЬИ</span>
      <span class="timeline-item-description">Детальное описание статьи</span>
    </div>
  </div>
</div>

</section>
  • Вопрос задан
  • 101 просмотр
Решения вопроса 1
Ankhena
@Ankhena
Нежно люблю верстку
На цветное изображение наложить белую маску нужной формы. Маску нарисовать, SVG.

Альтернатива: 2 линейных градиента в фоне из белого в прозрачный под 45 градусов.
Градиенты можно в псевдоэлемент складывать, как больше нравится.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
Dnebl
@Dnebl
Задатьbackground-color и background-image или background: #000 url('img.png');
Или цвет надо динамически определять?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Deliver Москва
До 160 000 руб.
Nordavind Москва
от 60 000 до 90 000 руб.
Smart Медицина Москва
от 120 000 руб.