First off all what you made is amazing, I added ribbons for you at the bottomby adding 2 span
elements under div
with a class
.circle
and added ribbon triangles virtually...
Demo 2 (Longer triangles tweaking border: 40px solid rgba(255,255,255,1);
)
.circle span:nth-of-type(1) {
width: 40px;
height: 120px;
background: #F6C431;
content: "";
display: block;
position: absolute;
-moz-transform: rotate(10deg);
-webkit-transform: rotate(10deg);
transform: rotate(10deg);
z-index: -1;
left: 10px;
}
.circle span:nth-of-type(1):after {
content: "";
display: block;
position: absolute;
height: 0;
width: 0;
bottom: -1px;
left: 0;
border: 20px solid rgba(255,255,255,1);
border-top: 20px solid rgba(255,255,255,0);
border-left: 20px solid rgba(255,255,255,0);
border-right: 20px solid rgba(255,255,255,0);
}
.circle span:nth-of-type(2) {
width: 40px;
height: 80px;
background: #F6C431;
content: "";
display: block;
position: absolute;
-moz-transform: rotate(-10deg);
-webkit-transform: rotate(-10deg);
transform: rotate(-10deg);
z-index: -1;
left: 50px;
box-shadow: -10px -20px 10px 1px #D5A002;
}
.circle span:nth-of-type(2):after {
content: "";
display: block;
position: absolute;
height: 0;
width: 0;
bottom: -1px;
left: 0;
border: 20px solid rgba(255,255,255,1);
border-top: 20px solid rgba(255,255,255,0);
border-left: 20px solid rgba(255,255,255,0);
border-right: 20px solid rgba(255,255,255,0);
}