सीएसएस में सीमा के साथ मोटे टैब कैसे बनाएं?

Question

मैं एक सामग्री अनुभाग के ऊपर बैठने के लिए कोणीय टैब बनाने की कोशिश कर रहा हूँ, और इस महान उदाहरण भर में आया था:

HTML:

<div class="tab"> 
    <div class="arrow"></div> 
</div> 

सीएसएस:

body 
{ 
    background-color: #666;  
} 
.tab 
{ 
    height: 50px; 
    width: 150px; 
    border-radius: 10px 10px 0px 0px; 
    background-color: #FFF; 
    position: relative; 
} 

.arrow 
{ 
    border-color: transparent transparent #FFF #FFF; 
    border-style: solid; 
    border-width: 23px 23px 23px 23px; 
    height:0; 
    width:0; 
    position:absolute; 
    bottom:0px; 
    right:-43px; 
} 

http://jsfiddle.net/P3P3Z/2/

हालांकि, मैं इस आकार में एक अलग 2 पीएक्स सीमा रंग सेट करना चाहता हूं, और दुर्भाग्य से यह विधि काम नहीं करती है क्योंकि यह सीमा टी का उपयोग करती है ओ आकार के दाहिने हाथ की ओर बनाएँ।

इस पर कोई विचार है कि मैं इसे कैसे संशोधित कर सकता हूं?

Answer 1

आप इस तरीके का प्रयास कर सकते हैं: jsFiddle

इसके बजाय तिरछी प्रभाव पैदा करने के लिए सीमाओं का उपयोग करने का, मैं इसे बनाने के लिए एक :after छद्म तत्व का उपयोग कर रहा हूँ। यह मुझे इसके चारों ओर सीमाओं को सेट करने की अनुमति देता है। फिर मैं उन सीमाओं को छिपाने के लिए :before छद्म तत्व का उपयोग कर रहा हूं जिन्हें मैं देखना नहीं चाहता हूं। सीएसएस में पुनरावर्ती 2px सीमा चौड़ाई मान से लिया गया है।

सीएसएस

.tab:before { 
    height: 50px; 
    width: 10px; 
    display: block; 
    content:" "; 
    background-color: #FFF; 
    position: absolute; 
    right: -2px; 
    top: -2px; 
    border-top: 2px solid blue; 
    border-bottom: 2px solid blue; 
} 
.tab { 
    height: 50px; 
    width: 150px; 
    border-radius: 10px 10px 0px 0px; 
    background-color: #FFF; 
    position: relative; 
    border: 2px solid blue; 
} 
.tab:after { 
    display: block; 
    content:" "; 
    width: 100px; 
    height: 50px; 
    top: -2px; 
    background-color: #FFF; 
    position: absolute; 
    right: -29px; 
    transform:skewX(45deg); 
    -ms-transform:skewX(45deg); 
    -webkit-transform:skewX(45deg); 
    border: 2px solid blue; 
    z-index: -1; 
}