सीएसएस रिबन पर त्रिकोण छाया

Question

मैं को पिक्सल के रूप में दोहराने की कोशिश कर रहा हूं क्योंकि मुझे मिल सकता है और दाईं ओर छाया करने की कोशिश करने में परेशानी हो रही है। क्या यह सीएसएस के साथ संभव है?

सीएसएस:

*{margin:0px;padding:0px;} 

html { 
    width:100%; 
     height:100%; 
     text-align: center; 
    } 

.bold { 
    font-weight:700; 
} 

#ribbon { 
     padding: .34em 1em; 
     margin: 0; 
     margin-top: 5%; 
     position:relative; 
     color: #000; 
     text-align: center; 
     letter-spacing:0.1em; 
     padding-top:12px; 
     padding-bottom:12px; 
     display: inline-block; 
     background: #ffd82b; 
     z-index:100; 
     box-shadow: 0 7px 0px -2px #ebeced; 
    } 

#ribbon:after { 
     content: ""; 
     width:3.2em; 
     bottom:-.5em; 
     position:absolute; 
     display:block; 
     border: .9em solid #ffd82b; 
     box-shadow: 0 7px 0px -2px #ebeced; 
     z-index:-2; 
    } 

#ribbon:after { 
     right: -4.3em; 
     border-left-width: .75em; 
     border-right-color:transparent; 
    } 

#content:after { 
     content:""; 
     bottom:-.5em; 
     position:absolute; 
     display:block; 
     border-style:solid; 
     border-color: #fc9f42 transparent transparent transparent; 
     z-index:-1; 
    } 
#content:before { 
    content:""; 
     top:-.5em; 
    transform: rotate(90deg); 
     position:absolute; 
     display:block; 
     border-style:solid; 
     border-color: #fc9f42 transparent transparent transparent; 
     z-index:-1; 
} 

#content:before { 
     left: 0; 
     border-width: .5em 0 0 .5em; 
    } 

#content:after { 
     right: 0; 
     border-width: .5em .5em 0 0; 
    } 

HTML: http://jsfiddle.net/k0a6jhv6/

Answer 1

करने के बाद आपको बॉक्स छाया का उपयोग किए बिना इस रिबन कर सकते हैं, केवल सीमाओं के साथ, z -इंडेक्स और छद्म तत्व:

DEMO

उत्पादन:

.ribbon{ 
 
    font-size:20px; 
 
    position:relative; 
 
    display:inline-block; 
 
    margin: 2em 1em; 
 
    text-align:center; 
 
} 
 
.text{ 
 
    display:inline-block; 
 
    padding:0.5em 1em; 
 
    min-width:20em; 
 
    line-height:1.2em; 
 
    background: #FFD72A; 
 
    position:relative; 
 
} 
 
.ribbon:after,.ribbon:before, 
 
.text:before,.text:after, 
 
.bold:before{ 
 
    content:''; 
 
    position:absolute; 
 
    border-style:solid; 
 
} 
 
.ribbon:before{ 
 
    top:0.3em; left:0.2em; 
 
    width:100%; height:100%; 
 
    border:none; 
 
    background:#EBECED; 
 
    z-index:-2; 
 
} 
 
.text:before{ 
 
    bottom:100%; left:0; 
 
    border-width: .5em .7em 0 0; 
 
    border-color: transparent #FC9544 transparent transparent; 
 
} 
 
.text:after{ 
 
    top:100%; right:0; 
 
    border-width: .5em 2em 0 0; 
 
    border-color: #FC9544 transparent transparent transparent; 
 
} 
 
.ribbon:after, .bold:before{ 
 
    top:0.5em;right:-2em; 
 
    border-width: 1.1em 1em 1.1em 3em; 
 
    border-color: #FECC30 transparent #FECC30 #FECC30; 
 
    z-index:-1; 
 
} 
 
.bold:before{ 
 
    border-color: #EBECED transparent #EBECED #EBECED; 
 
    top:0.7em; 
 
    right:-2.3em; 
 
}

<p class="ribbon"> 
 
    <span class="text"><strong class="bold">Special Offer:</strong> Recieve bonus rewards points for signing up</span> 
 
</p>

Answer 2

क्या तुम्हें याद कर छाया बनाने के लिए एक नए तत्व जोड़ते हैं:

<div id="ribbon"> 
    <span id="content"><span class="bold">Special Offer:</span> Recieve bonus rewards points for signing up</span> 
</div> 

या यहाँ एक jsfiddle है?

#abc { 
    display:inline-block;  
    border: .9em solid #ebeced; 
    border-right-color:transparent; 
    position:absolute; 
    right:-73px; 
    z-index:-3; 
    bottom:-12px; 
} 

http://jsfiddle.net/k0a6jhv6/9/

एक और समाधान, उपयोग अवधि: अंदर #content

#content span:after { 
    content:''; 
    display:block;  
    border: .9em solid #ebeced; 
    border-right-color:transparent; 
    position:absolute; 
    right:-73px; 
    z-index:-3; 
    bottom:-12px; 
} 

http://jsfiddle.net/k0a6jhv6/11/