Colore bordo personalizzato triangolo CSS

Question

Tentativo di utilizzare un colore esadecimale personalizzato per il mio triangolo CSS (bordo). Tuttavia dal momento che utilizza le proprietà del bordo non sono sicuro su come procedere. Mi piacerebbe evitare javascript e css3 semplicemente a causa della compatibilità. Sto cercando di avere il triangolo con uno sfondo bianco con un bordo di 1 pixel (attorno ai lati angolati del triangolo) con il colore # CAD5E0. È possibile? Ecco quello che ho finora:

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

mio violino: http://jsfiddle.net/4ZeCz/

Answer 1

Realmente dovete fingere con due triangoli ....

.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

So che lo accetti ma controlla questo uno anche con meno 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/