Cor da borda personalizada do triângulo CSS

Tentativa de usar uma cor hexadecimal personalizada para o 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. Eu 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 eu 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/

Você realmente tem que fingir com dois triângulos ….

 .container { margin: 15px 30px; width: 200px; background: #fff; border: 1px solid #a00; position: relative; min-height: 200px; padding: 20px; text-align: center; color: #fff; font: bold 1.5em/180px Helvetica, sans-serif; text-shadow: 0 0 1px #000; } .container:after, .container:before { content: ''; display: block; position: absolute; left: 100%; width: 0; height: 0; border-style: solid; } .container:after { top: 10px; border-color: transparent transparent transparent #fdd; border-width: 10px; } .container:before { top: 9px; border-color: transparent transparent transparent #a00; border-width: 11px; } 

Atualizado Fiddle aqui

insira a descrição da imagem aqui

Eu sei que você aceita isso, mas verifique este também com menos css:

 .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; right:-7px; width: 10px; height: 10px; background: #FFFFFF; border-right:1px solid #CAD5E0; border-bottom:1px solid #CAD5E0; -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); } 

http://jsfiddle.net/4ZeCz/3/

Eu acho que é mais simples usando o caminho do clipe :

 .container { width: 150px; min-height: 150px; background: #ccc; padding: 8px; padding-right: 6%; display: inline-block; clip-path: polygon(0% 0%,0% 100%,90% 100%,90% 5%,100% 10%,90% 15%,90% 0%); } 
 
test content
 .triangle{ position: absolute; width:0px; height:0px; border-left: 45px solid transparent; border-right: 45px solid transparent; border-bottom: 72px solid #DB5248; } .triangle:after{ position: relative; content:"!"; top:8px; left:-8px; color:#DB5248; font-size:40px; } .triangle:before{ content:"."; color: #DB5248; position: relative; top:-14px; left:-43px; border-left: 41px solid transparent; border-right: 41px solid transparent; border-bottom: 67px solid white; } 

Outra maneira de conseguir isso, especialmente para alguém que precisa disso para trabalhar com triângulos equiláteros ou mesmo escalenos como eu, é usar filter: drop-shadow(...) com vários valores e sem raio de desfoque. Isso tem o benefício adicional de não precisar de vários elementos, ou access a ambos : before e: after (eu estava tentando fazer isso com: depois do conteúdo que estava inline, então queria evitar o posicionamento absoluto também).

Para o caso acima, o CSS do after pode ser parecido com isso ( 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); } 
 
Test Container