Couleur de la bordure personnalisée du triangle CSS

Question

Essayez d'utiliser un hexadécimale de la couleur pour mon css triangle (la frontière). Toutefois, puisqu'il utilise les propriétés de bordure je ne sais pas comment faire. Je voudrais rester à l'écart de javascript et css3, simplement en raison de la compatibilité. Je suis en train d'avoir le triangle sur un fond blanc avec un 1px frontière (autour de l'angle des côtés du triangle) avec la couleur #CAD5E0. Est-ce possible? Voici ce que j'ai à ce jour:

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

Mon violon: http://jsfiddle.net/4ZeCz/

Answer 1

Vous devez en fait simuler avec deux triangles ...

 .container {
    margin-left: 15px;
    width: 200px;
    background: #FFFFFF;
    border: 1px solid #CAD5E0;
    padding: 4px;
    position: relative;
    min-height: 200px;
}

.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 #CAD5E0;
    border-width: 10px;
}

.container:before {
    top: 9px;
    border-color: transparent transparent transparent #00f;
    border-width: 11px;
}​
 

Fiddle mis à jour ici

Answer 2

Je sais que vous acceptez cela, mais vérifiez celui-ci également avec moins de 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/