3

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

enter image description here

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

}
web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • 6
    I don't know what's going wrong, users are just posting images, and asking for weird shapes in CSS [here](http://stackoverflow.com/q/20966503/1542290), or say [here](http://stackoverflow.com/questions/19510601), [here](http://stackoverflow.com/q/20728150/1542290), [here](http://stackoverflow.com/questions/19334625/), [here](http://stackoverflow.com/q/20813572/1542290), [here](http://stackoverflow.com/q/19199684/1542290) , used to answer before but stopped now, can we have some code from your side? – Mr. Alien Jan 07 '14 at 11:54
  • Here are some other resources: [Draw basic shapes](http://www.tutorialsbucket.com/draw-basic-shapes-css3-tips-and-tricks), [The Shapes of CSS](http://www.css-tricks.com/examples/ShapesOfCSS/), [CSS3 Shapes](http://css3shapes.com/) – pasine Jan 07 '14 at 11:59
  • @Mr.Alien http://jsbin.com/iRAsofi/1/ –  Jan 07 '14 at 14:40
  • @IngeHenriksen casted a reopen vote a well as voted +1 , your question will be reopened shortly – Mr. Alien Jan 07 '14 at 15:55
  • 1
    This seems like a pointless exercise to me. Could you at least offer some explanation of why you're unwilling or unable to use more suitable tools like SVG or web fonts? – r3mainer Jan 07 '14 at 16:11
  • CSS is just simply the wrong tool for creating complex graphics. Use SVG. – Spudley Jan 07 '14 at 16:20

1 Answers1

3

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);
}
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • http://jsfiddle.net/ZeNz0r/3AHR4/1/ here you can edit the silver triangles into the little "bars" he has around it... i'm at work so can't really delve into finishing it^^ – Fernando Silva Jan 07 '14 at 16:14
  • @IngeHenriksen great, I went for flat colors, you turned them to gradient, great :) – Mr. Alien Jan 08 '14 at 04:30
  • @Mr.Alien I also added a circle behind to make it more like the image in my post - it's not identical to the ribbon rosette image but so close that most will recognize it as such. –  Jan 08 '14 at 14:47