[英]Triangle shadow on CSS ribbon
I am trying to replicate 我想复制
as pixel perfect as I can get and im having trouble trying to do the shadow on the right.
像我能得到的像素一样完美,我在尝试做右边的阴影时遇到了麻烦。 Is this possible with css?
这可能与CSS?
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: HTML:
<div id="ribbon">
<span id="content"><span class="bold">Special Offer:</span> Recieve bonus rewards points for signing up</span>
</div>
Or here's a jsfiddle: http://jsfiddle.net/k0a6jhv6/ 或者这里是一个jsfiddle: http : //jsfiddle.net/k0a6jhv6/
You can make this ribbon without using box-shadows, only with borders, z-index and pseudo elements : 您可以在不使用框阴影的情况下制作此功能区,仅使用边框,z-index和伪元素:
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>
What if you add a new element to create 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/ http://jsfiddle.net/k0a6jhv6/9/
another solution, use span:after inside #content 另一个解决方案,使用span:在#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/ http://jsfiddle.net/k0a6jhv6/11/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.