我正试图成为巴西的旗帜。到目前为止我有这个： 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>
你可以google他们的旗帜看起来如何。我希望曲线在.globe上方。到目前为止，我试过这个：
http://jsfiddle.net/FakeHeal/wxedxmnd/10/
PS：我知道星星没有正确对齐且小于实际数字
答案 0 :(得分：2)
检查更新后的小提琴：http://jsfiddle.net/sachinkk/wxedxmnd/13/
CSS：
.flag-brazil .globe .text {
font-family: "Arial";
font-size: 0.6em;
background: white;
font-weight: bold;
color: #169B4F;
text-transform: uppercase;
text-align: center;
padding: 0 5%;
position: absolute;
top: 33%;
left: 7px;
transform: rotate(20deg);
border-top-left-radius: 79%;
border-top-right-radius: 86%;
width: 91%;
height: 30px;
}
.flag-brazil .globe .text:after{
content: '';
width: 100%;
height: 30px;
background-color: #28166F;
position: absolute;
left: 0px;
border-radius: 100%;
top: 17px;
}
.flag-brazil .globe .text span{
margin-top: 6px;
display: inline-block;
}
答案 1 :(得分：1)
Svg更容易用于此目的。
我建议使用textPath元素：
查看Paths和textPath
用于创建文本路径
<svg width="300px" height="300px" viewBox="0 0 200 200">
<path id="test" stroke="#222" fill="none" d="M0,50 A20 20 0 0 1 50,50 A20 20 0 0 0 100,50"></path>
<text x="50" y="50">
<textPath xlink:href="#test" startOffset="-30">
example, example, example, example,
</textPath>
</text>
</svg>
答案 2 :(得分：0)
我尝试仅使用css创建巴西国旗....不幸的是，由于身体限制，我无法将代码放在这里....因此我已经在jsfiddle.net上传了代码...
<tr height=1 bgcolor="#009b3a">
<td colspan=47 rowspan=3 bgcolor="#009a3a" />
<td rowspan=3 />
<td bgcolor="#009b3c" />
<td />
</tr>
<tr height=1 bgcolor="#009c3c">
<td />
<td bgcolor="#009b3c" />
</tr>
<tr height=1 bgcolor="#009b3c">
<td colspan=2 />
</tr>
<tr height=1>
<td colspan=48 rowspan=5 />
<td bgcolor="#009837" />
<td bgcolor="#009b3a" />
</tr>
<tr height=1 bgcolor="#009c3b">
<td />
<td bgcolor="#009939" />
</tr>
<tr height=1 bgcolor="#009a37">
<td />
<td bgcolor="#009a38" />
</tr>
<tr height=1 bgcolor="#009b3a">
<td />
<td bgcolor="#029c3a" />
</tr>
<tr height=1 bgcolor="#009939">
<td colspan=2 />
</tr>
以下是链接：http://jsfiddle.net/JafferWilson/cskn37Lx/
我已经放了一小部分代码，因为Stackoverflow限制我放一个代码，然后是jsfiddle.net的链接......好的，请检查链接是否有完整的代码..... ok