Un altro modo per ottenere ciò, specialmente per qualcuno che ha bisogno di questo per lavorare con triangoli equilateri o addirittura scaleni come ho fatto io, è usare filter: drop-shadow(...)con più valori e senza raggio di sfocatura. Questo ha il vantaggio aggiuntivo di non aver bisogno di più elementi o di accedere a entrambi : prima e: dopo (stavo cercando di ottenere questo risultato con: dopo il contenuto che era in linea, quindi volevo evitare anche il posizionamento assoluto).
Nel caso precedente, il CSS di: after potrebbe essere simile a questo ( violino ):
.container {
margin-left: 15px;
width: 200px;
background: #FFFFFF;
border: 1px solid #CAD5E0;
padding: 4px;
position: relative;
min-height: 200px;
}
.container:after {
content: '';
display: block;
position: absolute;
top: 10px;
left: 100%;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 40px 15px; /* skewed to show support for non-right-angle triangles */
border-color: transparent transparent transparent #fff;
filter: drop-shadow(1px 0 0 #CAD5E0) drop-shadow(0 .5px 0 #CAD5E0);
}
<div class="container">
Test Container
</div>
Penso che ci siano alcune limitazioni o stranezze, però:
- Nessun supporto in IE11 (anche se sembra a posto in FF, Chrome e Edge)
- Non sono del tutto sicuro del motivo per cui .5px per il
<offset-y>valore nella seconda ombra esterna () sopra appaia più come 1px di 1px, sebbene immagino sia correlato alla trigonometria (anche se almeno sul mio monitor non vedo differenze tra il valori effettivi basati su trig o .5px o anche .1px per quella materia).
- I bordi superiori a 1 px (beh, il loro aspetto in questo modo) non sembrano funzionare bene. O almeno non ho trovato la soluzione, anche se vedi sotto per un modo non ottimale per andare un po 'più in grande. (Penserei che il quarto parametro (
<spread-radius>) di drop-shadow () documentato ma non supportato potrebbe essere quello che sto veramente cercando invece di più valori di filtro, ma aggiungerlo ha semplicemente rotto le cose.) Qui puoi vedere cosa inizia ad accadere quando si va oltre 1px ( violino ):
.container {
background-color: #eee;
padding: 1em;
}
.container:after {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20.4px 10px 0 10px;
border-color: yellow transparent transparent transparent;
margin-left: .25em;
display: inline-block;
filter: drop-shadow(-6px -4px 0 green) drop-shadow(6px -4px 0 red) drop-shadow(0 6px 0 blue);
}
<div class="container">
Test Container
</div>
Notare la stranezza che il primo (verde) viene applicato una volta, ma il secondo (rosso) viene applicato sia al triangolo giallo creato tramite il bordo che all'ombra verde () e all'ultimo (blu) viene applicato a tutto quanto sopra. (Forse è anche correlato all'aspetto .5px).
Ma immagino che tu possa sfruttare queste ombre che si accumulano l'una sull'altra se hai bisogno di qualcosa di più ampio di 1px, cambiandole in qualcosa di simile al seguente ( violino ):
filter: drop-shadow(0 0 2.5px red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red) drop-shadow(0 0 0 red);
dove il primo ha un raggio di sfocatura impostato (2.5px in questo caso, anche se il risultato appare moltiplicato), e tutto il resto ha sfocatura a 0. Ma questo funzionerà solo per lo stesso colore su tutti i lati, e risulta in alcuni angoli dall'aspetto arrotondato e bordi piuttosto ruvidi più si va.
