Outra maneira de fazer isso, especialmente para alguém que precisa disso para trabalhar com triângulos equiláteros ou mesmo escalenos como eu fiz, é usar filter: drop-shadow(...)valores múltiplos e nenhum raio de desfoque. Isso tem o benefício adicional de não precisar de vários elementos ou de acesso a ambos : antes e: depois (eu estava tentando fazer isso com: depois do conteúdo que estava embutido, então queria evitar o posicionamento absoluto também).
Para o caso acima, o CSS de: after pode ser parecido com ( 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>
Acho que existem algumas limitações ou estranhezas:
- Sem suporte no IE11 (embora pareça bom no FF, Chrome e Edge)
- Não tenho certeza de por que 0,5 px para o
<offset-y>valor na segunda sombra projetada () acima parece mais com 1 px do que 1 px, embora eu imagine que esteja relacionado à trigonometria (embora pelo menos no meu monitor não veja diferença entre valores reais baseados em trigonometria ou .5 px ou mesmo .1 px para esse assunto).
- Fronteiras com mais de 1 px (bem, sua aparência é assim) não parecem funcionar bem. Ou pelo menos não encontrei a solução, embora veja abaixo uma maneira menos do que ideal de aumentar um pouco mais. (Eu acho que o 4º parâmetro documentado, mas não suportado (
<spread-radius>) da sombra projetada () pode ser o que estou realmente procurando, em vez de vários valores de filtro, mas adicioná-lo apenas quebrou tudo.) Aqui você pode ver o que começa a acontecer ao ultrapassar 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>
Observe a curiosidade que o primeiro (verde) é aplicado uma vez, mas o segundo (vermelho) está sendo aplicado tanto ao triângulo amarelo criado através da borda quanto à sombra verde (), e o último (azul) é aplicado a todos os itens acima. (Talvez isso também esteja relacionado à aparência de 0,5 px).
Mas eu acho que você pode tirar vantagem dessas sombras projetadas umas sobre as outras se precisar de algo mais amplo do que 1px, alterando-as para algo como o seguinte ( 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);
onde o primeiro tem um raio de desfoque definido (2,5px neste caso, embora o resultado pareça multiplicado), e todo o resto tem desfoque em 0. Mas isso só funcionará para a mesma cor em todos os lados, e resulta em alguns cantos arredondados, bem como em bordas bastante ásperas, quanto maior você for.
