CSS三角形自定义边框颜色

Question

试图为我的css三角形（边框）使用自定义十六进制颜色。然而，由于它使用边界属性，我不确定如何去做这件事。我想避开javascript和css3，仅仅是因为兼容性。我试图让这个三角形有一个带有1px边框的白色背景（围绕着三角形的两边），颜色为＃CAD5E0。这可能吗？这是我到目前为止有：

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

我的小提琴：http://jsfiddle.net/4ZeCz/

Answer 1

你确实有伪造它有两个三角形....

.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

我知道你接受，但检查此人们还用更少的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/