Howto make a CSS3 ribbon rosette - html

Question

I would like to find a ribbon rosette made in pure CSS3 and HTML or get tips on how to make one. I should look something like this one
Demo
Here's what I've tried...
<div class="star"></div>
<div class="circle">Ribbon Rosette</div>
.star {
left: 100px;
top: 100px;
height: 80px;
width: 80px;
background: silver;
position: absolute;
text-align:left;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.star:before {
height: 80px;
width: 80px;
background: silver;
content:"";
position: absolute;
/* Rotate */
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.star:after {
padding-top: 10px;
text-align: center;
vertical-align: middle;
height: 70px;
width: 80px;
background: silver;
content: "";
position: absolute;
/* Rotate */
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
}
.circle {
font: 400 18px/1.1 "freight-sans-pro",sans-serif;
color: #000000;
left: 95px;
top: 95px;
position: absolute;
text-align:center;
padding-top: 25px;
width: 90px;
height: 65px;
background: silver;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
background: #fceabb; /* Old browsers */
background: -moz-linear-gradient(top, #fceabb 0%, #fccd4d 50%, #f8b500 51%, #fbdf93 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fceabb), color-stop(50%,#fccd4d), color-stop(51%,#f8b500), color-stop(100%,#fbdf93)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* IE10+ */
background: linear-gradient(to bottom, #fceabb 0%,#fccd4d 50%,#f8b500 51%,#fbdf93 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fceabb', endColorstr='#fbdf93',GradientType=0 ); /* IE6-9 */
}

Answer 1

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
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);
}