Color del borde personalizado del triángulo CSS

Intento utilizar un color hexadecimal personalizado para mi triángulo css (borde). Sin embargo, dado que usa propiedades de borde no estoy seguro de cómo hacerlo. Me gustaría alejarme de javascript y css3 simplemente por compatibilidad. Estoy intentando que el triángulo tenga un fondo blanco con un borde de 1px (alrededor de los lados angulosos del triángulo) con el color # CAD5E0. es posible? Esto es lo que tengo hasta ahora:

.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; }​ 

Mi violín: http://jsfiddle.net/4ZeCz/

En realidad, tienes que simularlo con dos triangularjs …

 .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; } 

Fiddle actualizado aquí

enter image description here

Sé que lo aceptas pero comprueba este también con 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/

Creo que es más simple usando clip-path :

 .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; } 

Otra forma de lograr esto, especialmente para alguien que necesita esto para trabajar con triangularjs equiláteros o escalenos como yo, es usar filter: drop-shadow(...) con múltiples valores y sin radio de desenfoque. Esto tiene el beneficio adicional de no necesitar elementos múltiples, o acceso a ambos : antes y después (traté de lograr esto con: después del contenido que estaba en línea, así que también quería evitar el posicionamiento absoluto).

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); } 
 
Test Container