सीएसएस त्रिकोण कस्टम सीमा रंग

Question

मेरे सीएसएस त्रिभुज (सीमा) के लिए एक कस्टम हेक्स रंग का उपयोग करने का प्रयास कर रहा है। हालांकि चूंकि यह सीमा गुणों का उपयोग करता है, इसलिए मुझे यह सुनिश्चित नहीं है कि यह करने के बारे में कैसे जाना है। मैं संगतता के कारण बस जावास्क्रिप्ट और सीएसएस 3 को साफ़ करना चाहता हूं। मैं रंग # सीएडी 5 ई 0 के साथ त्रिकोण के पास 1 पीएक्स सीमा (त्रिभुज के कोण के चारों ओर) के साथ एक सफेद पृष्ठभूमि रखने की कोशिश कर रहा हूं। क्या यह संभव है? यहाँ मैं अब तक है:

.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

मुझे पता है कि आप इसे स्वीकार करते हैं लेकिन इसे जांचें कम सीएसएस के साथ एक भी:

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