Une autre façon d'accomplir cela, en particulier pour quelqu'un qui en a besoin pour travailler avec des triangles équilatéraux ou même scalènes comme je l'ai fait, est de l'utiliser filter: drop-shadow(...)avec plusieurs valeurs et sans rayon de flou. Cela a l'avantage supplémentaire de ne pas avoir besoin de plusieurs éléments, ni d'accéder aux deux : avant et: après (j'essayais d'accomplir cela avec: après le contenu qui était en ligne, je voulais donc éviter le positionnement absolu).
Dans le cas ci-dessus, le CSS de: after pourrait ressembler à ceci ( violon ):
.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>
Je pense qu'il y a cependant des limites ou des bizarreries:
- Pas de support dans IE11 (bien que cela semble bien dans FF, Chrome et Edge)
- Je ne sais pas trop pourquoi .5px pour le
<offset-y> valeur de la deuxième ombre portée () ci-dessus ressemble plus à 1px qu'à 1px, même si j'imagine que cela est lié à la trigonométrie (même si au moins sur mon moniteur, je ne vois aucune différence entre le valeurs réelles basées sur les triggers ou .5px ou même .1px d'ailleurs).
- Les bordures supérieures à 1px (enfin, leur apparence de cette façon) ne semblent pas bien fonctionner. Ou du moins, je n'ai pas trouvé la solution, mais voyez ci-dessous un moyen moins qu'optimal d'aller un peu plus grand. (Je pense que le 4ème paramètre documenté mais non pris en charge (
<spread-radius>) de drop-shadow () pourrait être ce que je recherche vraiment au lieu de plusieurs valeurs de filtre, mais l'ajouter en fait tout simplement cassé les choses.) Ici, vous pouvez voir ce que commence à se produire lorsque vous dépassez 1px ( violon ):
.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>
Remarquez le fait que le premier (vert) est appliqué une fois, mais le second (rouge) est appliqué à la fois au triangle jaune créé via la bordure ainsi qu'à l'ombre portée verte (), et au dernier (bleu) s'applique à tout ce qui précède. (Peut-être que c'est aussi lié à l'apparence .5px).
Mais je suppose que vous pouvez profiter de ces ombres portées qui se construisent les unes sur les autres si vous avez besoin de quelque chose de plus large que 1px, en les changeant en quelque chose comme ce qui suit ( violon ):
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);
où le tout premier a un ensemble de rayons de flou (2,5px dans ce cas, bien que le résultat semble multiplié), et tous les autres ont un flou à 0. Mais cela ne fonctionnera que pour la même couleur de tous les côtés, et il en résulte dans certains coins arrondis ainsi que sur des bords assez rugueux, plus vous allez.
