CSS
语言：
CSSSCSS
确定
body {
background: #222228;
font-size: 60px;
}
h1,
h2 {
text-align: center;
font-family: sans-serif;
color: #eee;
font-size: 0.6em;
}
.flags {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.flag {
width: 1.6em;
height: 1em;
background: #eee;
margin: 0.5em;
flex: none;
position: relative;
}
.spain {
box-shadow: 0 0.33em red inset, 0 0.69em yellow inset, 0 1em red inset;
}
.peru {
box-shadow: 0.53em 0 red inset, 1.06em 0 white inset, 1.6em 0 red inset;
}
.usa {
box-shadow: 0 0.111em red inset, 0 0.222em white inset, 0 0.333em red inset, 0 0.444em white inset, 0 0.555em red inset, 0 0.666em white inset, 0 0.777em red inset, 0 0.88em white inset, 0 1em red inset;
}
.usa:before {
top: 0;
left: 0;
content: "";
position: absolute;
background: blue;
width: 0.8em;
height: 0.55em;
}
.usa:after {
content: "\2605";
position: absolute;
font-size: 0.15em;
color: #fff;
top: 0.2em;
left: 0.2em;
line-height: 1;
text-shadow: 1em 0, 2em 0, 3em 0, 4em 0, 0 1em, 1em 1em, 2em 1em, 3em 1em, 4em 1em, 0 2em, 1em 2em, 2em 2em, 3em 2em, 4em 2em;
}
.chile {
box-shadow: 0 0.5em white inset, 0 1em red inset;
}
.chile:before {
content: "";
color: #fff;
background: blue;
width: 0.5em;
height: 0.5em;
position: absolute;
top: 0;
left: 0;
font-size: 1em;
}
.chile:after {
content: "\2605";
color: #fff;
position: absolute;
font-size: 0.4em;
left: 0.2em;
top: 0.1em;
line-height: 1;
}
.bolivia {
box-shadow: 0 0.33em #d81e05 inset, 0 0.69em #f8e213 inset, 0 1em #007a3d inset;
}
.argentina {
box-shadow: 0 0.33em #75aadb inset, 0 0.69em white inset, 0 1em #75aadb inset;
}
.uruguay {
box-shadow: 0 0.142em #0635a9 inset, 0 0.284em white inset, 0 0.426em #0635a9 inset, 0 0.568em white inset, 0 0.71em #0635a9 inset, 0 0.852em white inset, 0 1em #0635a9 inset;
}
.uruguay:before {
position: absolute;
top: 0;
left: 0;
content: "";
background: white;
height: 0.5em;
width: 0.8em;
}
.uruguay:after {
content: "\2600";
color: yellow;
font-size: 0.5em;
position: absolute;
top: 0.1em;
left: 0.35em;
line-height: 1;
}
.paraguay {
box-shadow: 0 0.33em #ce1127 inset, 0 0.69em white inset, 0 1em #0038a7 inset;
}
.brasil {
background: #00923f;
}
.brasil:after {
position: absolute;
content: "";
width: 0.6em;
height: 0.5em;
background: yellow;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg) skew(32deg) scale(1.3);
}
.brasil:before {
content: "";
width: 0.4em;
height: 0.4em;
background: #0038a7;
position: absolute;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
}
.colombia {
box-shadow: 0 0.5em #fcd116 inset, 0 0.75em #003893 inset, 0 1em #ce1126 inset;
}
.venezuela {
box-shadow: 0 0.33em #feff41 inset, 0 0.66em #00006a inset, 0 1em #dc0000 inset;
}
.mexico {
box-shadow: 0.53em 0 #016948 inset, 1.06em 0 white inset, 1.6em 0 #ce1127 inset;
}
.panama {
background: #fff;
}
.panama:before {
content: "";
width: 0.8em;
height: 0.5em;
background: #0067c6;
position: absolute;
top: 0.5em;
left: 0;
box-shadow: 0.8em -0.5em #d21034;
}
.panama:after {
content: "\2605";
color: #0067c6;
position: absolute;
top: 0.1em;
left: 0.5em;
font-size: 0.4em;
line-height: 1;
text-shadow: 2em 1.2em #d21034;
}
.costa-rica {
box-shadow: 0 0.15em #002b7f inset, 0 0.3em #fff inset, 0 0.7em #ce1126 inset, 0 0.85em #fff inset, 0 1em #002b7f inset;
}
.cuba {
box-shadow: 0 0.2em #002a8f inset, 0 0.4em white inset, 0 0.6em #002a8f inset, 0 0.8em white inset, 0 1em #002a8f inset;
}
.cuba:after {
content: "";
width: 0;
height: 0;
display: block;
border-style: solid;
border-width: 0.5em 1em;
border-color: transparent transparent transparent #ce1126;
}
.cuba:before {
content: "\2605";
color: #fff;
position: absolute;
font-size: 0.5em;
line-height: 1;
top: 50%;
transform: translateY(-50%);
left: 0.1em;
}
.guatemala {
box-shadow: 0.53em 0 #4897d2 inset, 1.06em 0 white inset, 1.6em 0 #4897d2 inset;
}
.nicaragua {
box-shadow: 0 0.33em #0146e2 inset, 0 0.66em #fff inset, 0 1em #0146e2 inset;
}
.el-salvador {
box-shadow: 0 0.33em #01209f inset, 0 0.66em #fff inset, 0 1em #01209f inset;
}
.honduras {
box-shadow: 0 0.28em #0047ba inset, 0 0.72em #fff inset, 0 1em #0047ba inset;
}
.honduras:after {
content: "\2605";
color: #0047ba;
font-size: 0.2em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
line-height: 1;
text-shadow: 1.5em -0.5em, 1.5em 0.5em, -1.5em -0.5em, -1.5em 0.5em;
}
.puerto-rico {
box-shadow: 0 0.2em #0050f0 inset, 0 0.4em white inset, 0 0.6em #0050f0 inset, 0 0.8em white inset, 0 1em #0050f0 inset;
}
.puerto-rico:after {
content: "";
width: 0;
height: 0;
display: block;
border-style: solid;
border-width: 0.5em 1em;
border-color: transparent transparent transparent #ed0000;
}
.puerto-rico:before {
content: "\2605";
color: #fff;
position: absolute;
font-size: 0.5em;
line-height: 1;
top: 50%;
transform: translateY(-50%);
left: 0.1em;
}
.flag.republica-dominicana {
background: #fff;
}
.flag.republica-dominicana:before {
background: #043256;
position: absolute;
top: 0;
left: 0;
width: 0.7em;
height: 0.4em;
content: "";
box-shadow: 0.9em 0.6em #043256, 0.9em 0 #f50204, 0 0.6em #f50204;
}
.jamaica {
background: #f9da00;
overflow: hidden;
}
.jamaica:after {
position: absolute;
content: "";
width: 0.6em;
height: 0.5em;
background: #000;
top: 50%;
left: -20%;
transform: translateY(-50%) rotate(-30deg) skew(32deg) scale(1.3);
box-shadow: 0.7em 0.63em #000, 0.77em -0.03em #00b240, -0.05em 0.65em #00b240;
}
.haiti {
box-shadow: 0 0.5em #d31134 inset, 0 1em #01209f inset;
}
.haiti:before {
content: "";
background: #fff;
width: 0.4em;
height: 0.3em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.haiti:after {
content: "\1F334";
color: green;
font-size: 0.2em;
line-height: 1;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: 0.3em 0, -0.3em 0;
}
.canada {
box-shadow: 0.4em 0 red inset, 1.2em 0 white inset, 1.6em 0 red inset;
}
