गोल तीर

Question

संभव डुप्लिकेट:
How to create a triangle in CSS3 using border-radius

वे सीएसएस के साथ बनाने के लिए संभव है?

सामान्य तीर:

.some_element:after{  
    content: ''; 
    height: 0; 
    width: 0; 
    position: absolute;   
    top: 0; 
    left: 0;  
    border: 100px solid transparent; 
    border-top-color: #000;   
} 

(http://jsfiddle.net/W3xwE/)

गोल तीर (मैं केवल नीचे के हिस्से में गोल चाहते हैं):

:(

Answer 1

हाँ, यह संभव है! आप rotate बॉक्स, इसे border-radius दें और 45deglinear-gradient का उपयोग background के रूप में करें।

DEMO

एचटीएमएल:

<div class='arrow'></div> 

सीएसएस:

.arrow { 
    width: 7em; 
    height: 7em; 
    border-radius: 0 0 2em 0; 
    margin: 5em; 
    transform: rotate(45deg); 
    background: linear-gradient(-45deg, black 50%, transparent 50%); 

} 

आप तीर के कोण अलग होना चाहते हैं, तो आप भी कर सकते हैं skew यह।

इस तथ्य को ध्यान में रखें कि CSS gradients are not supported by IE9 (मैं इस समय "या पुराना" नहीं कह रहा हूं क्योंकि आप अपने टैग के बीच CSS3 का उल्लेख करते हैं)। उस मामले में समाधान एक ठोस पृष्ठभूमि का उपयोग करना होगा और किसी भी तरह से यह सुनिश्चित करना होगा कि ऊपरी हिस्सा दिखाई नहीं दे रहा है, या तो इसे पिछले तत्व के साथ कवर करके, या इसे क्लिप करके (the answer Tim Medora प्रदान किया गया) देखें।

इसके अलावा, इस बिंदु पर वहाँ अभी भी बिना उपसर्ग वाक्य रचना के लिए कोई समर्थन है (हालांकि यह जल्द ही बदल जाएगा: डी) है, तो आप या तो स्वयं उपसर्गों -webkit-, -moz-, और -o- जोड़ने की आवश्यकता होगी। (मैंने उन्हें डेमो में नहीं जोड़ा क्योंकि डैबलेट का उपयोग करता है -फिक्स-फ्री जो इसे करने का ख्याल रखता है।)

Answer 2

क्लिपिंग को नियंत्रित करने के लिए एक बॉक्स के अंदर घूर्णन वाले वर्ग को रखकर ऐसा करने का एक तरीका है। व्यक्तिगत रूप से, मुझे लगता है कि @ एना का समाधान बहुत साफ है।

http://jsfiddle.net/K44mE/14/

<div id="outer"><div id="inner">&nbsp;</div></div> 

#inner{ 
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    -o-transform: rotate(45deg); 
    -moz-transform: rotate(45deg); 
    transform: rotate(45deg); 
    background-color:silver; 
    width:100px; 
    height:100px; 
    top: -70px; 
    left: 20px; 
    position:relative; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
} 

#outer { 
    position: absolute; 
    width: 140px; 
    height: 70px;  
    top:10px; 
    left:10px; 
    overflow: hidden;  
    border: 1px solid red; 
} 

Answer 3

सीएसएस

.arrow { 
     width: 7em; 
     height: 7em; 
     border-radius: 0 0 2em 0; 
     margin: -2em 2.5em; 
     transform: rotate(45deg); 
     background: linear-gradient(-45deg, black 50%, transparent 50%); 

    } 

एचटीएमएल

<div class='arrow'></div>