I'm trying to make the flag of Brazil. So far I have this: CSS:
.flags {
width: 700px;
height: 375px;
position: relative;
}
.flag-brazil {
background-color: #00923F;
}
.flag-brazil .square {
width: 38%;
height: 65%;
position: absolute;
top: 50%;
left: 50%;
margin-left: -19.5%;
margin-top: -16.25%;
background: #F8C300;
transform: rotate(-33deg) skewX(25deg);
}
.flag-brazil .globe {
width: 30%;
height: 55.8%;
background: #28166F;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
margin-top: -13.95%;
margin-left: -15%;
}
.flag-brazil .globe .text {
font-family: "Arial";
font-size: 1em;
background: white;
font-weight: bold;
color: #169B4F;
text-transform: uppercase;
text-align: center;
padding: 0 5%;
position: absolute;
top: 20%;
}
.flag-brazil .globe .stars > span {
display: inline-block;
position: absolute;
color: white;
}
.flag-brazil .globe .stars > span:before {
content: "\2605";
position: absolute;
left: 0;
color: white;
}
.flag-brazil .globe .stars > span.big {
width: 1.1em;
font-size: 12px;
}
.flag-brazil .globe .stars > span.medium {
width: 0.7em;
font-size: 9px;
}
.flag-brazil .globe .stars > span.small {
width: 0.4em;
font-size: 6px;
}
.flag-brazil .globe .stars > span.star_1 {
bottom: 10%;
left: 25%;
}
.flag-brazil .globe .stars > span.star_2 {
bottom: 15%;
left: 51%;
}
.flag-brazil .globe .stars > span.star_3 {
bottom: 32%;
left: 32%;
}
.flag-brazil .globe .stars > span.star_4 {
bottom: 17%;
left: 17%;
}
.flag-brazil .globe .stars > span.star_5 {
bottom: 22%;
left: 34%;
}
.flag-brazil .globe .stars > span.star_5 {
bottom: 33%;
left: 69%;
}
.flag-brazil .globe .stars > span.star_6 {
bottom: 23%;
left: 49%;
}
.flag-brazil .globe .stars > span.star_7 {
bottom: 18%;
left: 71%;
}
.flag-brazil .globe .stars > span.star_8 {
bottom: 28%;
left: 71%;
}
.flag-brazil .globe .stars > span.star_9 {
bottom: 26%;
left: 59%;
}
.flag-brazil .globe .stars > span.star_10 {
bottom: 39%;
left: 83%;
}
.flag-brazil .globe .stars > span.star_11 {
bottom: 10%;
left: 61%;
}
.flag-brazil .globe .stars > span.star_12 {
bottom: 5%;
left: 43%;
}
.flag-brazil .globe .stars > span.star_13 {
bottom: 7%;
left: 36%;
}
.flag-brazil .globe .stars > span.star_14 {
bottom: 17%;
left: 33%;
}
.flag-brazil .globe .stars > span.star_15 {
bottom: 29%;
left: 13%;
}
.flag-brazil .globe .stars > span.star_16 {
bottom: 64%;
left: 64%;
}
<div class="flags flag-brazil">
<div class="square"></div>
<div class="globe">
<div class="stars">
<span class="big star_1">☆</span>
<span class="big star_2">☆</span>
<span class="big star_3">☆</span>
<span class="medium star_4">☆</span>
<span class="medium star_5">☆</span>
<span class="small star_6">☆</span>
<span class="small star_7">☆</span>
<span class="small star_8">☆</span>
<span class="medium star_9">☆</span>
<span class="medium star_10">☆</span>
<span class="medium star_11">☆</span>
<span class="small star_12">☆</span>
<span class="medium star_13">☆</span>
<span class="big star_14">☆</span>
<span class="big star_15">☆</span>
<span class="big star_16">☆</span>
<div class="text">
<span class="char1">O</span>
<span class="char2">r</span>
<span class="char3">d</span>
<span class="char4">e</span>
<span class="char5">m</span>
<span class="char6"> </span>
<span class="char7">e</span>
<span class="char8"> </span>
<span class="char9">P</span>
<span class="char10">r</span>
<span class="char11">o</span>
<span class="char12">g</span>
<span class="char13">r</span>
<span class="char14">e</span>
<span class="char15">s</span>
<span class="char16">s</span>
<span class="char17">o</span>
</div>
</div>
</div>
</div>
You can google how their flags looks. I want the curve the text over the .globe
. So far I've tried this:
http://jsfiddle.net/FakeHeal/wxedxmnd/10/
PS: I know that the stars are not properly aligned and less than the actual number
SVG
Svg is easier to use for this purpose.
I would suggest using a textPath element for this:
Look at Paths and textPath For creating a text-path