CSS 삼각형 사용자 지정 테두리 색

Question

내 CSS 삼각형 (테두리)에 사용자 지정 16 진수 색을 사용하려고 시도했습니다. 그러나 경계 속성을 사용하므로이 작업을 수행하는 방법을 잘 모릅니다. 나는 호환성 때문에 단순히 자바 스크립트와 css3을 조종하고 싶습니다. 나는 삼각형에 색 # CAD5E0을 가진 1px 테두리 (삼각형의 각진 각 변의 주위)가있는 흰색 배경을 가지려고합니다. 이것이 가능한가? 여기에 지금까지이 작업은 다음과 같습니다

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