सीमा-रंग की पारदर्शी संपत्ति

Question

मुझे एक तीर बनाने के लिए border-color के transparent संपत्ति उपयोग का यह अच्छा उदाहरण मिला है।
मैं समझता हूं कि सीमाओं को कैसे खींचा जाता है और कैसे एक तरफ सेट सीमा वाला एक खाली तत्व तीर प्रभाव प्राप्त करने में मदद कर सकता है, लेकिन इस उदाहरण में मुझे क्या भटकता है पारदर्शी का उपयोग होता है। इस कोड के साथ

#daniel{ 
border-color: rgba(111,111,111,0.2) transparent transparent; 
border-style: solid; 
border-width: 15px; 
position: absolute; 
} 

मैं एक तीर नीचे की ओर इशारा करते मिलती है:
इस सरल कोड पर एक नज़र डालें:

<div id="daniel"></div> 

सीएसएस। (JSFIDDLE)

केवल एक पारदर्शी के साथ मुझे hourglass प्रभाव मिलता है। (JSFIDDLE):

border-color: rgba(111,111,111,0.2) transparent; 

क्या मुझे confuses जानते हुए भी नहीं है क्या border-{side}transparent इस आशुलिपि के गुणों में से है।

आशा है कि यह समझ में आता है।
किसी भी मदद की सराहना की।

धन्यवाद;)

Answer 1

वहाँ जिस क्रम में पक्षों ऐसे आशुलिपि अंकन में प्रदर्शित करने के लिए एक सरल नियम है: मुसीबत: शीर्ष सही नीचे वाम

यदि आप कम से कम 4 तर्क है, लापता लोगों को निम्नलिखित नियमों से भर रहे हैं (कितने तर्क के आधार पर याद कर रहे हैं):

left = right 
bottom = top 
right = top 

तो

अपने उदाहरण

border-color: rgba(111,111,111,0.2) transparent transparent; 

एसी में

border-color: rgba(111,111,111,0.2) transparent; 

हम निम्नलिखित मिल

top=rgba 
right=transparent 
bottom=top=rgba 
left=right=transparent 

Answer 2

क्या आप को पता है है border-color:red black blue; शीर्ष सीमा लाल कर देगा की जरूरत है, नीचे एक नीले और छोड़ दिया और सही लोगों को काला, और कहा कि यही कारण है कि आप अपने पहले उदाहरण में एक तीर मिलता है:

• शीर्ष रंग
• किसी और पारदर्शी सब कुछ

यह भी 2 उदाहरण बताते हैं:

• शीर्ष & नीचे रंगीन
• छोड़ दिया & सही पारदर्शी

उदाहरण

This style rule assigns a red border to the top, a green border to the bottom, and blue borders to the left- and right-hand sides of paragraphs within the element with ID "example": 
#example p { 
    border-color: red blue green; 
    border-style: solid; 
} 

Source

सीएसएस त्रिकोण प्रभाव का एक विवरण विवरण के लिए, देखें: How does this CSS triangle shape work?

Answer 3

कि बॉर्डर शैली को दर्शाता है: नियमों के मुताबिक, हम अन्य उदाहरण में

top=rgba 
right=transparent 
bottom=transparent 
left=right=transparent 

समान है।w3c

Answer 4

आपका

पहला उदाहरण से विनिर्देशों को देखो

border-color: rgba(111,111,111,0.2) transparent transparent; 

परिभाषित

first rgba border= is a top border; 
second transparent border = are left & right border; 
third transparent border= are bottom border; 

जांच इस उदाहरण http://jsfiddle.net/hDpnw/8/

&

अपने

दूसरे उदाहरण

border-color: rgba(111,111,111,0.2) transparent; 

परिभाषित

rgba border= are top & bottom border; 
transparent border = are left & right border; 

जांच इस उदाहरण http://jsfiddle.net/hDpnw/7/