Bóng tam giác trên CSS ribbon

Question

Tôi đang cố gắng sao chép làm pixel hoàn hảo như tôi có thể nhận được và đang gặp sự cố khi cố gắng làm bóng ở bên phải. Điều này có thể với 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> 

Hoặc đây là một jsfiddle: http://jsfiddle.net/k0a6jhv6/

Answer 1

Bạn có thể làm cho băng này mà không sử dụng hộp bóng, chỉ có biên giới, z thành phần -index và pseudo:

DEMO

đầu ra:

.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

gì nếu bạn thêm một yếu tố mới để tạo ra bóng thiếu?

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

một giải pháp khác, khoảng sử dụng: sau khi bên # 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/