CSS Triangle Shadow

Question

I am trying to replicate like a pixel, how can I get, and I'm having trouble trying to make a shadow on the right. Is this possible with css?

CSS

*{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:

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

Or jsfiddle here: http://jsfiddle.net/k0a6jhv6/

Answer 1

You can make this tape without using shadows, only with borders, z-index and pseudo-elements:

Demo

output:

 .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

What if you add a new element to create a missing shadow?

 #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/

another solution, use span: after inside #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/