CSS-треугольник для соответствия элементам div с переменным размером

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

Ниже приведены правила:

Поместите треугольник внутри всех элементов div.
Нижний левый угол треугольника должен соответствовать нижнему левому углу внутри всех div.
Верхний правый угол треугольника должен соответствовать верхнему правому углу внутри всех div.
Дивы имеют фиксированную ширину и высоту, но в реальной жизни все они неизвестны, унаследованы от родителя.
Угол диагонали будет различным для каждого div, но это нормально.
Для решения проблемы используйте границы, градиенты, преобразование или SVG. Я бы не хотел использовать фиксированные пиксельные решения, такие как холст или PNG.

.one {
  width: 100px;
  /* Unknown */
  height: 30px;
  /* Unknown */
  background: #ccc;
}
.two {
  width: 40px;
  /* Unknown */
  height: 90px;
  /* Unknown */
  background: #aaa;
}
.three {
  width: 70px;
  /* Unknown */
  height: 70px;
  /* Unknown */
  background: #aaa;
}
.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 50px 50px;
  border-color: transparent transparent #007bff transparent;
}

<div class="one"></div>
<br>
<div class="two"></div>
<br>
<div class="three"></div>
<br>

<div class="triangle"></div>

Ответ 1

Достижение этого эффекта с помощью border будет невозможно для контейнеров с динамическим размером, поскольку они не могут принимать процентные значения или адаптироваться на основе изменения размера контейнера. Они могут использовать только пиксельные или видовые области. Оба они не будут очень полезны для динамического контейнера.

Преобразования могут быть использованы путем размещения псевдоэлемента поверх контейнеров, но для этого нужны вычисления высоты и ширины элемента на основе тригонометрических уравнений. Более простые - это подход градиента и SVG.

Использование градиента:

Вы можете сделать это, используя градиент с синтаксисом to [side] [side]. Это отзывчиво и будет работать для всех размеров контейнеров. Единственный недостаток заключается в том, что в некоторых случаях будут зубчатые линии, где ширина или высота слишком велики по сравнению с другими.

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

.one {
  width: 100px;
  height: 30px;
  background-color: #ccc;
}
.two {
  width: 40px;
  height: 90px;
  background-color: #aaa;
}
.three {
  width: 70px;
  height: 70px;
  background-color: #aaa;
}
div {
  background-image: linear-gradient(to top left, blue 50%, transparent 51%);
}

<div class="one"></div>
<br>
<div class="two"></div>
<br>
<div class="three"></div>
<br>

Ответ 2

в градиенте

стиль

.triangle {
width: 100%;
height: 100%;
background: linear-gradient(to bottom right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, #007bff 50%, #007bff 100%)
}

HTML

<div class="one">
  <div class="triangle"></div>
</div><br>
<div class="two">
  <div class="triangle"></div>
</div><br>
<div class="three">
  <div class="triangle"></div>
</div>