CSS三angular形自定义边框颜色

试图为我的CSS三angular形（边框）使用自定义hex颜色。 然而，因为它使用边界属性，我不确定如何去做这个。 我想避开javascript和css3，仅仅是因为兼容性。 我试图让这个三angular形有一个带有1px边框的白色背景（在三angular形的边上），颜色为＃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

你实际上必须用两个三angular形来伪造它。

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

更新小提琴在这里

Answer 2

我知道你接受，但检查这一个还less用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/