Color de borde personalizado de triángulo CSS

Question

Intentando 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/

Answer 1

De hecho, tienes que fingir con dos 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; 
} 

Updated Fiddle here

Answer 2

Sé que lo acepta, pero consulte esto uno 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/