सीएसएस क्लिप कोनों?

Question

इस तरह शैली तत्व के लिए एक आसान तरीका है?

वाला एक मोबाइल पर इस्तेमाल किया जा करने के लिए इतना CSS3 के पूरी तरह से उपलब्ध है। एक साधारण तरीके से नहीं सोच सकते हैं। छवियां प्रश्न से बाहर हैं।

यह इस ब्लॉक वाले हो गया है और वहाँ के भीतर एक पाठ (यह एक ब्लॉक वाले 8 बिट बटन है)

Answer 1

यह फीसेला की शुरुआत से कूदता है, लेकिन यह अपने स्वयं के उत्तर की गारंटी देने के लिए काफी अलग है।

1. रंगीन ब्लॉक को अत्यधिक रूप से डालने की बजाय, यह लाल रंग के तत्वों को जोड़ता है, जिससे पृष्ठभूमि को दिखाया जा सकता है। फिर भी, इसे ठीक से गणना करने के लिए (ताकि वे स्क्वायर कोनों हैं!) मुझे एक निश्चित चौड़ाई ऊंचाई निर्धारित करना पड़ा। प्रतिशत के साथ ऐसा करने के लिए शायद कुछ प्रकार का निराला तरीका है, लेकिन अवधारणा के सबूत के लिए यह सोचने के लिए बहुत सिरदर्द था। चूंकि आवश्यकता निश्चित ऊंचाई चर चौड़ाई के लिए है, यह काम करना चाहिए।

2. छद्म तत्वों को सामग्री की आवश्यकता है या वे "पतन" करेंगे। सामग्री खाली हो सकती है, लेकिन उस संपत्ति को सेट करने की आवश्यकता है।

सीएसएस:

/* main button block */ 
.button { 
    display:inline-block; 
    background: #f00; 
    position: relative; 
    line-height: 60px; 
    text-align: center; 
    padding: 0 20px; 
    height: 60px; 
    margin-left: 0.5em; 
} 

/* common background color to all */ 
.button, .button::before, .button::after { 
    background-color: #f00; 
} 

/* shared styles to make left and right lines */ 
.button::before, .button::after { 
    content: ""; 
    position: absolute; 
    height: 50px; 
    width: 5px; 
    top: 5px; 

} 

/* pull the left 'line' out to the left */ 
.button::before { 
    left: -5px; 
} 

/* pull the right 'line' out to the right */ 
.button::after {  
    right: -5px; 
} 

फिडल: http://jsfiddle.net/3R9c5/2/

Answer 2

सीएसएस बॉर्डर-त्रिज्या विशेषता

Answer 3

शायद this तुम्हारी मदद करेगा होना चाहिए। या आप केवल

.cadre 
{ 
border-radius: 10px; 
} 

अपनी सीएसएस फ़ाइल में जोड़ सकते हैं, फिर इसे div पर प्रभावित कर सकते हैं।

Answer 4

मुझे नहीं लगता कि border-radius इसे पूरा कर सकता है।

http://jsfiddle.net/DpLdt/

सीएसएस:

body { 
background:blue; 
} 
div#clipcorners { 
width:500px; 
height:200px; 
background:red; 
position:relative; 
margin:100px auto; 
} 
span#a,span#b { 
position:absolute; 
width:10px; 
height:180px; 
top:10px; 
background:red; 
} 
span#a { 
left:-10px; 
} 
span#b { 
right:-10px; 
} 

HTML:

<div id="clipcorners"> 
<span id="a"> 
</span> 
<span id="b"> 
</span> 
</div>​ 

Answer 5

आपको लगता है कि चार ब्लॉक वाले में से प्रत्येक के सम्मिलित कर सकते हैं यह सबसे आसान तरीका है मैं के बारे में सोच सकता है ::before याके माध्यम से छद्म तत्वों को जोड़कर -कोर्नर्स।

उदा .:

.button { 
    background: #f00; 
    position: relative; 
} 

/* corner top left */ 
.button::after { 
    position: absolute; 
    top: 0; left: 0; 
    width: 5px; height: 5px; 
    background: #00f; 
} 

/* corner top right */ 
.button::after { 
    position: absolute; 
    top: 0; right: 0; 
    width: 5px; height: 5px; 
    background: #00f; 
} 

/* corner bottom left */ 
/* … */ 

Answer 6

this के बारे में कैसे?

HTML:

<div class="block">(text goes here)</div> 

सीएसएस:

body {background:#1990D7;} 
.block {background:#FF1200; line-height:52px; margin:8px auto; width:359px; 
    position:relative; text-align:center; font-weight:bold; color:yellow} 
.block::before {display:inline-block; background:#FF1200; content:''; 
    position:absolute; top:4px; left:-4px; bottom:4px; width:4px;} 
.block::after {display:inline-block; background:#FF1200; content:''; 
    position:absolute; top:4px; right:-4px; bottom:4px; width:4px;} 

संपादित करें: प्रश्न की मांगों में नवीनतम अंतर्दृष्टि के बाद अपडेट किया गया।