CSSBattle过关代码(31~40)-CSDN博客

CSSBattle是一款通过编写HTML和CSS代码实现目标样式的在线挑战游戏，用户需通过代码调整元素样式以匹配右侧目标区域的布局。CSSBattle

31. Equals

代码：100% match

<div></div><div></div>
<style>
body{margin:0;background:#AA445F;position:relative}
div{position:absolute;width:100;height:200;background:#F7EC7D;border-radius:200px 0 0 200px;left:75;top:50}
div:nth-child(2){background:#E38F66;left:225;transform:rotate(180deg)}

32. Band-aid

代码：100% match

<div id='suq1'><div><div id='suq2'></div><div id='suq3'></div>
<style>
body{margin:0;position:relative}
[id*='suq']{position:absolute;left:50%;top:50%;translate:-50% -50%;width:50;height:200}
#suq1{background:#F3AC3C;transform:rotate(-45deg)}
#suq2{background:#A3A368;transform:rotate(90deg)}
#suq3{width:50;height:50;background:#FBE18C}

33. Birdie

代码：99.9% match

<div></div><div></div><div></div>
<style>
body{background:#1A4341;position:relative}
div{position:absolute;left:50%;top:50%;translate:-50% -50%}
div:nth-child(1){width:100;height:102;background:#F3AC3C;border-radius:0 100px 0 0;left:242;top:92}
div:nth-child(2){width:75;height:150;background:#998235;border-radius:100px 0 0 100px;left:154}
div:nth-child(3){width:30;height:30;background:#0B2429;border-radius:50%;left:162;top:112}

34. Christmas Tree

代码：100% match

<div></div><div class='suq1'></div><div class='suq2'></div>
<style>
body{margin:0;background:#007065;display:flex;flex-direction:column;justify-content:center;align-items:center}
div{border-left:125px solid transparent;border-right:125px solid transparent}
div:nth-child(1){border-bottom:100px solid #FFEECF;margin-top:50}
.suq1{height:50;background:#F5C181;clip-path:polygon(25% 0%, 75% 0%,100% 100%, 0% 100%)}
.suq2{height:50;background:#00A79D;clip-path:polygon(25% 0%, 75% 0%,100% 100%, 0% 100%)}

35. Ice Cream

代码：100% match

<div class='box'><div class='div1'></div><div class='div2'></div></div>
<style>
body{margin:0;background:#293462;display:flex;justify-content:center;align-items:center}
.box{width:100;height:200;#FFF1C1;display:flex;flex-direction:column;align-items:center}
.div1{width:100;height:150;background:#FFF1C1;border-radius:50px 50px 20px 20px}
.div2{width:30;height:50;background:#FE5F55;border-radius:0 0 10px 10px;box-shadow:inset 0px 10px 0px #A64942}

36. Interleaved

代码：100% match

<div id='bigbox'>
<div></div><div></div><div></div><div></div><div></div>
</div>
<style>
body{margin:0;background:#1A4341;display:flex;justify-content:space-around}
#bigbox{width:350;height:300;display:flex;justify-content:space-between}
#bigbox>div{width:50;height:200;border-radius:50px;}
#bigbox div:nth-child(odd){background:#F3AC3C;margin-top:100px;border-radius:50px 50px 0 0}
#bigbox div:nth-child(even){background:#998235;margin-bottom:100px;border-radius:0 0 50px 50px}

37. Tunnel

代码：100% match

<div></div><div></div><div></div>
<style>
body{margin:0;background:#6592CF;position:relative}
div{position:absolute;left:50%;top:50%;translate:-50% -50%;width:250;height:250;background:#243D83}
div:nth-child(2){width:150;height:150;background:#6592CF;transform:rotate(15deg)}
div:nth-child(3){width:75;height:75;background:#243D83;transform:rotate(30deg)}

38. Not Simply Square

代码：100% match

<div class='suq'></div>
<div class='box1'><div></div><div></div></div>
<div class='box2'><div></div><div></div></div>
<style>
body{margin:0;background:#293462;position:relative}
.suq{width:200;height:200;background:#FFF1C1}
.box1{width:100;height:200;position:absolute;left:200;top:0}
.box1 div:nth-child(1){width:100;height:150;background:#FE5F55}
.box1 div:nth-child(2){width:100;height:50;background:#A64942}
.box2{width:200;height:100;position:absolute;left:0;top:200;display:flex}
.box2 div:nth-child(1){width:150;height:100;background:#FE5F55}
.box2 div:nth-child(2){width:50;height:100;background:#A64942}

39. Sunset

代码：100% match

<div id='box1'></div>
<div id='box2'></div>
<style>
body{margin:0;background:#1A4341;position:relative}
[id*='box']{position:absolute;left:50%;top:50%;translate:-50% -50%}
#box1{width:200;height:200;background:#998235;border-radius:50%;background:linear-gradient(#998235 0,#998235 30px,transparent 30px,transparent 170px,#998235 170px)}
#box2{width:250;height:250;background:#F3AC3C;border-radius:50%;background:linear-gradient(transparent 75px,#F3AC3C 75px,#F3AC3C 95px,transparent 95px,transparent 115px,#F3AC3C 115px,#F3AC3C 135px,transparent 135px,transparent 155px,#F3AC3C 155px,#F3AC3C 175px,transparent 175px)}

40. Letter B

代码：99.9% match

<div id='suq'></div><div id='box'></div>
<style>
body{margin:0;background:#6592CF;position:relative}
div{position:absolute;left:50%;top:50%;translate:-50% -50%}
#suq{width:100;height:100;border-radius:50%;border:51px solid #243D83;border-left-color:transparent;transform:rotate(45deg)}
#box{width:50;height:102;background:#243D83;left:125px;top:100}

若文章对你有帮助，点赞❤️、收藏⭐加关注➕吧！