Otra forma de lograr esto, especialmente para alguien que necesita que esto funcione con triángulos equiláteros o incluso escalenos como lo hice yo, es usar filter: drop-shadow(...)con múltiples valores y sin radio de desenfoque. Esto tiene el beneficio adicional de no necesitar múltiples elementos, o acceso a ambos : antes y: después (estaba tratando de lograr esto con: después de contenido que estaba en línea, así que quería evitar el posicionamiento absoluto también).
Para el caso anterior, el CSS de: after podría verse así ( violín ):
.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>
Sin embargo, creo que hay algunas limitaciones o rarezas:
- No hay soporte en IE11 (aunque parece estar bien en FF, Chrome y Edge)
- No estoy muy seguro de por qué .5px para el
<offset-y> valor en la segunda sombra () arriba parece más 1px que 1px, aunque imagino que está relacionado con la trigonometría (aunque al menos en mi monitor no veo diferencia entre los valores reales basados en trigonometría o .5px o incluso .1px para el caso).
- Los bordes de más de 1 px (bueno, su apariencia de esa manera) no parecen funcionar bien. O al menos no he encontrado la solución, aunque vea a continuación una forma menos que óptima de ir un poco más grande. (Creo que el cuarto parámetro documentado pero no compatible (
<spread-radius>) de drop-shadow () podría ser lo que realmente estoy buscando en lugar de múltiples valores de filtro, pero agregarlo simplemente rompió las cosas por completo). Aquí puede ver lo que comienza a suceder cuando va más allá de 1px ( violín ):
.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>
Observe la gracia de que el primero (verde) se aplica una vez, pero el segundo (rojo) se aplica tanto al triángulo amarillo creado a través del borde como a la sombra verde () y al último (azul) se aplica a todo lo anterior. (Quizás eso también esté relacionado con la apariencia de .5px).
Pero supongo que puede aprovechar estas sombras paralelas que se construyen entre sí si necesita algo más ancho que 1px, cambiándolas a algo como lo siguiente ( violín ):
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);
donde el primero tiene un conjunto de radio de desenfoque (2.5px en este caso, aunque el resultado parece multiplicado), y todos los demás tienen desenfoque en 0. Pero esto solo funcionará para el mismo color en todos los lados, y resulta en algunas esquinas de aspecto redondeado, así como bordes bastante ásperos cuanto más grande vas.
