Tentativa de usar uma cor hexadecimal personalizada para meu triângulo css (borda). No entanto, uma vez que ele usa propriedades de borda, não tenho certeza de como fazer isso. Eu gostaria de evitar javascript e css3 simplesmente por causa da compatibilidade. Estou tentando fazer com que o triângulo tenha um fundo branco com uma borda de 1px (ao redor dos lados angulares do triângulo) com a cor # CAD5E0. Isso é possível? Aqui está o que tenho até agora:
.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-color: transparent transparent transparent #CAD5E0;
border-style: solid;
border-width: 10px;
}
Meu violino: http://jsfiddle.net/4ZeCz/
css
border
css-shapes
Ed R
fonte
fonte
border-coloratributo, dependendo da borda colorida, o triângulo apontará para uma direção diferente. Para virar a seta para apontar para a esquerda, mudeborder-colorparatransparent #e3f5ff transparent transparent;em ambos,.container:aftere.container:beforeEu sei que você aceita isso, mas verifique este também com menos css:
http://jsfiddle.net/4ZeCz/3/
fonte
-webkit-prefixo agora (e-ms-para o IE9). Todos os outros navegadores oferecem suporte sem prefixo.Acho que é mais simples usando o caminho de clipe :
fonte
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 ):
Acho que existem algumas limitações ou estranhezas:
<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).<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 ):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 ):
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.
fonte
fonte