1.Simply Square
目标
解决方案
<div></div>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background: #5d3a3a;
}
div {
width: 200px;
height: 200px;
background: #b5e0ba;
}
</style>
2.Carrom
目标
解决方案
1. 使用绝对定位
- 其实不需要
body
上不需要使用position: relative
。当在一个元素上声明position: absolute
时,它相对于它最近的非静态定位的元素定位,如果没有,就相对于html
定位。 - 如果
body/html
不显示声明width
和height
的大小,那么它的默认大小为视口的高度和宽度。如果此时四个矩形的包含块没有高度,就显示不出四个矩形了(绝对定位的元素脱离文档流)。
<div class="lt"></div>
<div class="rt"></div>
<div class="lb"></div>
<div class="rb"></div>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #62374e;
position: relative;
}
div {
width: 50px;
height: 50px;
background: #fdc57b;
position: absolute;
}
.lt {
top: 50px;
left: 50px;
}
.rt {
top: 50px;
right: 50px;
}
.lb {
bottom: 50px;
left: 50px;
}
.rb {
bottom: 50px;
right: 50px;
}
</style>
3. Push Button
目标
解决方案
<div class="circle1 center">
<div class="circle2 center">
<div class="circle3 center">
<div class="circle4 center"></div>
</div>
</div>
</div>
<style>
* {
margin: 0px;
padding: 0px;
}
body {
background: #6592CF;
position: relative;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.circle1 {
width: 300px;
height: 150px;
background: #243D83;
}
.circle2 {
width: 250px;
height: 250px;
background: #6592CF;
border-radius: 50%;
}
.circle3 {
width: 150px;
height: 150px;
background: #243D83;
border-radius: 50%;
}
.circle4 {
width:50px;
height: 50px;
background: #EEB850;
border-radius: 50%;
}
</style>
4.Ups n Downs
目标
解决方案
<div class="ct"></div>
<div class="lb"></div>
<div class="rb"></div>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #62306D;
position: relative;
}
div {
position: absolute;
width: 100px;
height: 100px;
background: #F7EC7D;
}
.ct {
left: 50%;
bottom: 50%;
transform: translate(-50%, 0);
border-radius: 50% 50% 0 0;
}
.lb {
left:50%;
top:50%;
transform: translate(-150%, 0);
border-radius: 0 0 50% 50%;
}
.rb {
right: 50%;
top: 50%;
transform: translate(150%, 0);
border-radius: 0 0 50% 50%;
}
</style>
5.Acid Rain
目标
解决方案
<div class="bottom"></div>
<div class="center"></div>
<div class="top"></div>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #0B2429;
position: relative;
}
div {
width: 120px;
height: 120px;
position: absolute;
}
.bottom {
background: #F3AC3C;
border-radius: 50% 0 50% 50%;
left:20%;
bottom: 10%;
}
.center {
background:#998235;
border-radius: 50% 0 50% 50%;
left: 35%;
bottom: 30%;
z-index: -1;
}
.top {
background: #F3AC3C;
border-radius: 50%;
left: 50%;
top: 10%;
z-index: -2;
}
</style>
6.Missing Slice
目标
解决方案
<div class="lt"></div>
<div class="rt"></div>
<div class="lb"></div>
<style>
* {
margin: 0;
padding: 0;
}
body {
background:#E3516E;
position:relative;
}
div {
width: 100px;
height: 100px;
position: absolute;
}
.lt {
background: #51B5A9;
border-radius: 100% 0 0 0;
bottom: 50%;
right: 50%;
}
.rt {
background: #FADE8B;
border-radius: 0 100% 0 0;
left: 50%;
bottom: 50%;
}
.lb {
background: #F7F3D7;
border-radius: 0 0 0 100%;
top: 50%;
right:50%;
}
</style>
7.Leaf Trail
目标
解决方案
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
<style>
* {
margin: 0;
padding: 0;
}
body {
background:#0B2429;
position:relative;
}
div {
width: 150px;
height: 150px;
background: #dd6b4d;
border-radius:66% 0;
position: absolute;
}
.left {
background: #1A4341;
top: 50%;
left: 50%;
transform: translate(-83%, -50%);
}
.center {
background: #998235;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.right {
background: #F3AC3C;
top: 50%;
right:50%;
transform: translate(83%, -50%);
}
</style>
8.Forking Crazy
目标
解决方案
<div class="fork-top">
<div class="fork-hole"></div>
<div class="fork-hole"></div>
<div class="fork-hole"></div>
<div class="fork-hole"></div>
<div class="fork-hole"></div>
<div class="fork-hole"></div>
<div class="fork-hole"></div>
</div>
<div class="fork-body"></div>
<div class="fork-bottom"></div>
<style>
* {
padding: 0;
margin: 0;
}
body {
background: #6592CF;
}
.fork-top {
margin: 50px auto 0;
width: 140px;
height: 110px;
}
.fork-hole {
float: left;
width: 20px;
height: 110px;
background: #060F55;
border-radius: 10px;
}
.fork-hole:nth-child(even) {
background: #6592CF;
}
.fork-body {
width: 140px;
height: 100px;
background:#060F55;
margin: -10px auto 0;
border-radius: 0 0 100px 100px;
}
.fork-bottom {
width: 20px;
height: 50px;
background: #060F55;
margin: auto;
}
</style>
9.Tesseract
目标
解决方案
<div class="container1 center">
<div class="container2 center">
<div class="container3 center">
<div class="container4 center"></div>
</div>
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #222730;
position: relative;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container1 {
width:400px;
height: 150px;
background: #4CAAB3;
}
.container2 {
width: 250px;
height: 250px;
background: #222730;
transform: translate(-50%, -50%) rotate(45deg);
}
.container3 {
width: 150px;
height: 150px;
background: #4CAAB3;
}
.container4 {
width: 50px;
height: 50px;
background: #393E46;
border-radius: 50%;
}
</style>
10.Cloaked Spirits
目标
解决方案
<div class="cloaked-small left">
<div>
<div></div>
</div>
</div>
<div class="cloaked-big center">
<div>
<div></div>
</div>
</div>
<div class="cloaked-small right">
<div>
<div></div>
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #62306D;
position: relative;
}
.center {
position: absolute;
left: 50%;
bottom: 0%;
transform: translate(-50%, 0);
}
.left {
position: absolute;
left: 50%;
bottom: 0%;
transform: translate(-150%, 0);
}
.right {
position: absolute;
left: 50%;
bottom: 0%;
transform: translate(50%, 0);
}
.cloaked-small {
width: 100px;
height: 150px;
background: #F7EC7D;
border-radius: 50px 50px 0 0;
}
.cloaked-small > div {
width: 100px;
height:100px;
background: #AA445F;
border-radius: 50%;
position: relative;
}
.cloaked-small > div > div{
position: absolute;
width: 60px;
height:60px;
background: #E38F66;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.cloaked-big {
width: 100px;
height: 250px;
background: #F7EC7D;
border-radius: 50px 50px 0 0;
}
.cloaked-big > div {
width: 100px;
height:100px;
background: #E38F66;
border-radius: 50%;
position: relative;
}
.cloaked-big > div > div{
position: absolute;
width: 60px;
height:60px;
background: #AA445F;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
11.Eye of Sauron
目标
解决方案
<div class="semicircle left">
<div class="center">
<div class="semicircle-top"></div>
</div>
</div>
<div class="circle center">
<div class="center">
<div class="center"></div>
</div>
</div>
<div class="semicircle right">
<div class="center">
<div class="semicircle-bottom"></div>
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: #191210;
position: relative;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.left {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-150%, -50%);
}
.right {
position: absolute;
top: 50%;
left: 50%;
transform: translate(50%, -50%);
}
.circle {
width: 140px;
height: 140px;
background: #ECA03D;
border-radius: 50%;
}
.circle > div {
width: 100px;
height: 100px;
background: #191210;
border-radius: 50%;
}
.circle > div > div{
width: 50px;
height: 50px;
background: #84271C;
border-radius: 50%;
}
.semicircle {
z-index: -1;
background: #ECA03D;
width: 100px;
height:100px;
border-radius: 50%;
}
.semicircle > div {
width: 60px;
height: 60px;
background: #191210;
border-radius: 50%;
}
.semicircle > div > div {
width: 100px;
height:50px;
background: #191210;
position: relative;
}
.semicircle-top {
left: -20px;
top: -20px;
border-radius: 50px 50px 0 0;
}
.semicircle-bottom {
left:-20px;
bottom: -30px;
border-radius: 0 0 50px 50px;
}
</style>
12.Wiggly Moustache
目标
解决方案
<div class="semicircle left">
<div class="little-circle little-circle-left"></div>
</div>
<div class="semicircle center"></div>
<div class="semicircle right">
<div class="little-circle little-circle-right"></div>
</div>
<style>
* {
margin: 0;
padding: 0;
}
body {
position: relative;
background: #F5D6B4;
}
.little-circle {
background: #D86F45;
width: 20px;
height: 20px;
border-radius: 50%;
}
.little-circle-left{
position: absolute;
bottom: 0;
right: 0;
transform: translate(0, 50%);
}
.little-circle-right {
position: absolute;
bottom: 0;
left: 0;
transform: translate(0, 50%);
}
.center {
position: absolute;
bottom: 50%;
left: 50%;
transform: translate(-50%, 0);
}
.left {
position: absolute;
transform: rotate(180deg) translate(130%, 0);
top: 50%;
left: 50%;
}
.right {
position: absolute;
transform: rotate(180deg) translate(-130%, 0);
top: 50%;
right: 50%;
}
.semicircle {
background: #D86F45;
width: 100px;
height: 50px;
border-radius: 50px 50px 0 0;
}
.semicircle::after {
content: "";
display: block;
background: #F5D6B4;
width: 60px;
height: 30px;
border-radius: 30px 30px 0 0;
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
}
</style>