Triangolo CSS per adattarsi agli elementi div di dimensioni variabili

Question

Si prega di fare riferimento al mio violino. Stavo mirando a creare un triangolo (da inserire all'interno di un div) e farlo stare esattamente (da un angolo all'altro).

Ecco le regole delineate:

• Posizionare il triangolo all'interno di tutti gli elementi div.
• L'angolo in basso a sinistra del triangolo dovrebbe adattarsi all'angolo in basso a sinistra all'interno di tutte le div.
• L'angolo in alto a destra del triangolo dovrebbe adattarsi all'angolo in alto a destra all'interno di tutte le div.
• I div hanno larghezza e altezza fisse, MA nella vita reale sono tutti sconosciuti, ereditati da un genitore.
• L'angolo della diagonale sarà diverso per ogni div ma va bene.
• Utilizzare i bordi, i gradienti, la trasformazione o SVG per risolvere il problema. Non vorrei usare soluzioni a pixel fissi come canvas o 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

raggiungimento di questo effetto con border non sarà possibile per contenitori di dimensioni dinamicamente perché non possono assumere valori percentuali o adattare in base a un cambiamento nella dimensione del contenitore . Possono usare solo unità pixel o viewport. Entrambi quelli non sarebbero di grande utilità per un contenitore dinamico.

Le trasformazioni possono essere utilizzate posizionando uno pseudo-elemento sopra i contenitori ma avrebbero bisogno di calcoli per l'altezza e la larghezza dell'elemento in base alle equazioni trigonometriche. Quelli più semplici sarebbero gli approcci gradiente e SVG.

Utilizzando Gradiente:

si può fare questo usando un gradiente con to [side] [side] sintassi. Questo è reattivo e funzionerebbe per tutte le dimensioni del contenitore. L'unico inconveniente è che in alcuni casi ci sono linee seghettate in cui la larghezza o l'altezza è troppo grande rispetto all'altra.

Un vantaggio di questo è che non richiede alcun elemento aggiuntivo (SVG o HTML, nemmeno pseudos) ma lo svantaggio sarà quando gli effetti di hover e click sono necessari solo per il triangolo (limitato ai limiti del triangolo) . Poiché l'elemento è ancora un rettangolo/quadrato, l'effetto hover o click verrà attivato anche quando il mouse si trova all'esterno del triangolo ma all'interno del contenitore.

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

---

Utilizzando SVG:

Si potrebbe anche farlo con SVG path elemento come nel frammento qui sotto. L'SVG deve essere posizionato assolutamente rispetto al contenitore e avere il 100% della larghezza e dell'altezza del genitore.

Il vantaggio dell'utilizzo di SVG per le sfumature del triangolo è che gli effetti di passaggio del mouse e del clic possono essere aggiunti al solo triangolo.

.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

in pendenza

stile

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