Trójkąt CSS do elementów div o zmiennej wielkości

Question

Proszę odnieść się do mojego skrzypce. Chciałem stworzyć trójkąt (do umieszczenia w div) i dokładnie go dopasować (od rogu do rogu).

Oto zasady nakreślone: ​​

• trójkąt wewnątrz wszystkich elementów DIV.
• Dolny lewy róg trójkąta powinien pasować do lewego dolnego rogu wewnątrz wszystkich elementów div.
• Prawy górny róg trójkąta powinien pasować do prawego górnego rogu wewnątrz wszystkich elementów div.
• DIV ma stałą szerokość i wysokość, ALE w rzeczywistości wszyscy są nieznani, odziedziczeni po rodzicu.
• Kąt przekątnej będzie różny dla każdego elementu div, ale jest w porządku.
• Użyj krawędzi, gradientów, transformacji lub SVG, aby rozwiązać problem. Nie chciałbym korzystać z rozwiązań opartych na stałych pikselach, takich jak płótno lub 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

Osiągnięcie tego efektu z border nie będzie możliwe dynamicznie wielkości pojemników, ponieważ nie mogą przyjmować wartości procentowe lub dostosować w oparciu o zmianę wymiaru pojemnika . Mogą używać tylko jednostek pikseli lub rzutni. Oba te nie przydałyby się do dynamicznego pojemnika.

Przekształcenia mogą być używane przez umieszczenie pseudoelementu na wierzchu kontenera, ale będą wymagały obliczeń dla wysokości i szerokości elementu na podstawie równań trygonometrycznych. Prostsze byłyby podejście gradientowe i SVG.

Korzystanie Gradient:

Można to zrobić stosując gradient z to [side] [side] składni. Jest responsywny i działałby dla wszystkich rozmiarów kontenera. Jedyną wadą jest to, że w niektórych przypadkach pojawiłyby się postrzępione linie, w których szerokość lub wysokość jest zbyt duża w porównaniu do drugiej.

Jedną z zalet tego rozwiązania jest to, że nie wymaga żadnych dodatkowych elementów (SVG lub HTML, nawet pseudo), ale wadą będzie to, że efekty unoszące i klikające są wymagane tylko w trójkącie (ograniczone do granic trójkąta) . Ponieważ element wciąż jest prostokątem/kwadratem, efekt hover or click będzie uruchamiany nawet wtedy, gdy mysz znajduje się poza trójkątem, ale w kontenerze.

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

---

Korzystanie SVG:

Można również zrobić z SVG path elementu jak w poniższym fragmencie. SVG musi być ustawiony absolutnie względem pojemnika i mieć 100% szerokości i wysokości rodzica.

Zaletą korzystania z SVG dla trójkąta nad gradientem jest to, że efekty hover i click można dodać tylko do trójkąta.

.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

gradientu

stylu

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