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

Question

Пожалуйста, обратитесь к моей скрипке. Я стремился создать треугольник (который должен быть размещен внутри 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>

JSFiddle Reference

Answer 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>

---

Использование SVG:

Вы также можете сделать это с SVG path элемента, как в приведенном ниже фрагменте кода. SVG должен быть установлен абсолютно по отношению к контейнеру и иметь 100% от ширины и высоты родителя.

Преимущество использования SVG для треугольника над градиентами заключается в том, что эффекты зависания и щелчка могут быть добавлены только к треугольнику.

.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{ 
 
    position: relative; 
 
} 
 
div > svg { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
svg path{ 
 
    fill: #0007bf; 
 
} 
 
svg path:hover{ 
 
    fill: crimson; 
 
}

<div class="one"> 
 
    <svg viewBox='0 0 100 100' preserveAspectRatio='none'> 
 
    <path d='M100,0 L100,100 0,100z' /> 
 
    </svg> 
 
</div> 
 
<br> 
 
<div class="two"> 
 
    <svg viewBox='0 0 100 100' preserveAspectRatio='none'> 
 
    <path d='M100,0 L100,100 0,100z' /> 
 
    </svg> 
 
</div> 
 
<br> 
 
<div class="three"> 
 
    <svg viewBox='0 0 100 100' preserveAspectRatio='none'> 
 
    <path d='M100,0 L100,100 0,100z' /> 
 
    </svg> 
 
</div> 
 
<br>

Answer 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>