रिबन के लिए सीएसएस

Question

मैं केवल इस सीएसएस का उपयोग करके इस छवि के बाईं तरफ रिबन का अंत कैसे आकर्षित करूं?

मैं जानता हूँ कि मैं इस तथ्य है कि सीएसएस में कोनों mitered कर रहे हैं का उपयोग कर सकते, तो मैं मुझे त्रिकोण आकार देने के लिए 0 और अन्य सीमाओं बड़ा की एक सीमा के साथ एक div हो सकता है। क्या यह केवल 1 div के साथ ऐसा करने का कोई तरीका है? या मुझे कुछ त्रिकोणों को ढेर करने की ज़रूरत है? मैं वास्तव में 1 div रखना पसंद करूंगा ताकि उपयोगकर्ताओं को इसके बारे में सोचना न पड़े और मैं इसे सम्मिलित करने के लिए सीएसएस :before छद्म तत्व का उपयोग कर सकता हूं। इसे लागू करने का सबसे अच्छा तरीका क्या है?

IE9 + और अन्य ब्राउज़रों के आधुनिक संस्करणों को केवल समर्थित होना आवश्यक है।

Answer 1

वेब पर बहुत सारे संसाधन हैं जो यह दिखाते हैं कि यह कैसे करें। एक बहुत अच्छा ट्यूटोरियल सीएसएस-चाल यहाँ ऑनलाइन है http://css-tricks.com/snippets/css/ribbon/

Ive भी तुम यहाँ के साथ http://jsfiddle.net/WqNQU/

<h1 class="ribbon"> 
    <strong class="ribbon-content">Everybody loves ribbons</strong> 
</h1> 



.ribbon { 
font-size: 16px !important; 
/* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */ 

width: 50%; 

position: relative; 
background: #ba89b6; 
color: #fff; 
text-align: center; 
padding: 1em 2em; /* Adjust to suit */ 
margin: 2em auto 3em; /* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */ 
} 
.ribbon:before, .ribbon:after { 
content: ""; 
position: absolute; 
display: block; 
bottom: -1em; 
border: 1.5em solid #986794; 
z-index: -1; 
} 
.ribbon:before { 
left: -2em; 
border-right-width: 1.5em; 
border-left-color: transparent; 
} 
.ribbon:after { 
right: -2em; 
border-left-width: 1.5em; 
border-right-color: transparent; 
} 
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after { 
content: ""; 
position: absolute; 
display: block; 
border-style: solid; 
border-color: #804f7c transparent transparent transparent; 
bottom: -1em; 
} 
.ribbon .ribbon-content:before { 
left: 0; 
border-width: 1em 0 0 1em; 
} 
.ribbon .ribbon-content:after { 
right: 0; 
border-width: 1em 1em 0 0; 
} 

Answer 2

एचटीएमएल

<div class="ribbon"> 
    <strong class="ribbon-content">Everybody loves ribbons</strong> 
</div>​ 

सीएसएस खेलने के लिए के लिए एक jsfiddle में यह अटक

.ribbon { 
    font-size: 16px !important; 
    width: 50%; 
    position: relative; 
    background: #ba89b6; 
    color: #fff; 
    text-align: center; 
    padding: 1em 2em; /* Adjust to suit */ 
    margin: 2em auto 3em; 
    } 
    .ribbon:before { 
    content: ""; 
    position: absolute; 
    display: block; 
    bottom: -1em; 
    border: 1.5em solid #986794; 
    z-index: -1; 
    } 
    .ribbon:before { 
    left: -2em; 
    border-right-width: 1.5em; 
    border-left-color: transparent; 
    } 

.ribbon .ribbon-content:before { 
content: ""; 
position: absolute; 
display: block; 
border-style: solid; 
border-color: #804f7c transparent transparent transparent; 
bottom: -1em; 
} 
.ribbon .ribbon-content:before { 
left: 0; 
border-width: 1em 0 0 1em; 
} 

See Demo

Reference