Próbuję replikować jako piksel idealny, ponieważ mogę uzyskać i mam problemy z wykonaniem cienia po prawej stronie. Czy to możliwe z css?Cień trójkąta na wstążce 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>
A oto jsfiddle: http://jsfiddle.net/k0a6jhv6/
może być w stanie wykorzystać [drop-cień] (http://stackoverflow.com/questions/ 21133763/webkit-filter-drop-shadow-for-other-browsers) zamiast box-shadow. - zobacz prawy koniec wstążki: http://jsfiddle.net/peteng/k0a6jhv6/2/ – Pete
Po prostu baw się kolorami i kryciem rgb, aby dopasować się do twoich potrzeb: http://jsfiddle.net/peteng/k0a6jhv6/5/ – Pete
@Pobierz genialny pomysł. Nie przepadałem za dużo tych filtrów. http://jsfiddle.net/k0a6jhv6/6/ –