Как сделать отзывчивый треугольник с помощью CSS

Question

У меня есть сетка, созданная с помощью начальной загрузки, с колонкой для изображения и колонкой для текста. Я должен создать треугольник в левой части текстового столбца, который перекрывает изображение, и оно должно быть отзывчивым. В зависимости от высоты контейнера он всегда должен быть посередине. Как я могу это сделать?

<div class="row no-gutters">
    <div class="col-6">
      <img src="http://placehold.it/200x200" class="w-100" alt="">
    </div>
    <div class="col-6 ">
      <p>lorem ipsum dolor</p>
    </div>
</div>

результаты должны быть такими: https://imgur.com/mf9rDh8

Answer 1

Треугольник можно сделать в CSS, создав div 0x0 с границами желаемой ширины треугольника. Вам нужно установить прозрачность для всех сторон, кроме одной стороны, цвета границы этого элемента. Вот пример:

.triangle{
  height: 0px;
  width: 0px;
  border: 20px solid transparent;
  border-right: 25px solid white;
  position: absolute;
  right: 0;
  top: 90px;
}

Вот ручка , где я создал то, что вы хотели в качестве примера.