सीएसएस क्लिप-पथ

Question

का उपयोग करते समय कोनों को गोल करने के लिए कैसे करें मैं इस आकार पर 3 बाएं कोने को गोल करने में सक्षम होना चाहता हूं, जिसे मैंने बनाया है, कोई विचार है कि यह कैसे किया जा सकता है?

div{ 
 
    position: absolute; 
 
    z-index: 1; 
 
    width: 423px; 
 
    height: 90px; 
 
    background-color: #b0102d; 
 
    color: white; 
 
    right: 0; 
 
    margin-top: 10vw; 
 
    -webkit-clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%); 
 
clip-path: polygon(100% 0%, 100% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%); 
 
}

<div></div>

Answer 1

मैं एक टिप्पणी विकल्प नहीं है हाँ, तो मैं एक जवाब के रूप में यह लिख रहा हूँ ..

आप पूर्णांक बनाना यथासंभव अधिक से अधिक अंक लिखने की ज़रूरत कोने। Nothig और ... के लिए, उदाहरण के लिए कुछ और अंक निचले हिस्से सा राउंडर बनाने के लिए: यहाँ टिप्पणी लोगों के रूप में

-webkit-clip-path: polygon(100% 0%, 100% 100%, 100% 100%, 25% 100%, 5% 70%,1% 60%, 0% 50%, 25% 0%); 

हाँ, ओह, या एसवीजी .. :)

Answer 2

आप आसपास छेड़छाड़ न कर सके कुछ अलग प्रभाव पाने के लिए सर्कल के साथ।

-webkit-clip-path: circle(60.0% at 50% 10%); 
clip-path: circle(50.0% at 50% 50%); 

Codepen

बहुत खराब आप बहुभुज और चक्र गठबंधन नहीं कर सकते हैं ... या हो सकता है आप कर सकते हैं और मैं यह पता लगा कि यह पर्याप्त के साथ चारों ओर नहीं खेला है। एचटीएच

Answer 3

एक आयताकार क्लिप बनाएं और उस पर गोलाकार सीमा के साथ एक मोटी आयताकार रखें। सौभाग्य हो!