CSS-Battle

玩一下 css-battle

Battle #1

#1. Simply Square

`

学习基本玩法，代码区外套body

<div></div>
<style>
  body{
    margin:0;
    background: #5d3a3a;
  }
  div {
    width: 200px;
    height: 200px;
    background: #b5e0ba;
  }
</style>
</style>

#2. Carrom

绝对定位

<div></div>
<div></div>
<div></div>
<div></div>
<style>
  body{
    padding:0;
    margin:0;
    background: #62374e;
  }
   div{
    width:50px;
    height:50px;
    background:#fdc57b;
    position:absolute;
  }
  div:nth-child(1){
    top:50px;
    left:50px
  }
  div:nth-child(2){
    top:50px;
    right:50px
  }
  div:nth-child(3){
    bottom:50px;
    left:50px
  }
  div:nth-child(4){
    bottom:50px;
    right:50px
  }
</style>

grid布局

<div></div>
<div></div>
<div></div>
<div></div> 
<style>
  body{
    margin:0;
    background:#62374e;
    display:grid;/* 网格布局 */
    grid-template-rows: 150px 150px;/* 设置每行高度 */
    grid-template-columns: 150px 150px;/* 设置每列宽度 */
    justify-items: center;/* 基于网格居中 */
    align-items: center;/* 基于网格居中 */
    column-gap:100px;/* 设置列间距 */
  }
  div {
    width: 50px;
    height: 50px;
    background: #fdc57b;
  }
</style>

#3. Push Button

<div class="box">
  <div class="out">
    <div class="mid">
      <div class="inner"></div>
    </div>
  </div>
</div>
<style>
  body{
    margin:0;
    background:#6592CF;
    display:flex;
    position:relative;
  }
  .box{
    margin:auto;
    width: 300px;
    height: 150px;
    background: #243D83;
  }
  /* 超出父元素，相对定位居中 */
  .out{
    position:relative;
    display:flex;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    background:#6592CF;
    width:250px;
    height:250px;
    border-radius:125px;;
  }
  .mid{
    margin:auto;
    background:#243D83;
    width:150px;
    height:150px;
    border-radius:75px;
    display:flex;
  }
  .inner{
    margin:auto;
    background:#EEB850;
    width:50px;
    height:50px;
    border-radius:25px;
  }
</style>

#4. Ups n Downs

定位

<div></div>
<div></div>
<div></div>
<style>
  body{
    background:#62306D
  }
  div {
    width: 100px;
    height: 100px;
    background: #F7EC7D;
    border-radius:50% 50% 0 0;
    position:absolute;
  }
  div:nth-child(odd){
    bottom:50px;
    transform:rotate(180deg)
  }
  div:nth-child(1){
    left:50px
  }
   div:nth-child(2){
     left:150px;
     bottom:150px;
   }
  div:nth-child(3){
    right:50px
  }
</style>

使用伪类

<div></div>
<style>
  body{
    margin:0;
    background:#62306D;
    position:relative;
  }
  div {
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-100%);
    width: 100px;
    height: 100px;
    border-radius: 50px 50px 0 0;
    background: #F7EC7D;
  }
  /* 默认为inline，必须设置content */
  div::before,div::after{
    position:absolute;
    content:"";
    display:block;
    width: 100px;
    height: 100px;
    border-radius:0 0 50px 50px;
    background: #F7EC7D;
    top:100%;
  }
  div::before{
    right:100%;
  }
  div::after{
    left:100%;
  }
</style>

#5. Acid Rain

<div class="box1"></div>
<div class="box2"></div>
<style>
  body{
    background:#0B2429;
  }
  .box1,.box2{
    background:#998235;
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
  }
  .box1,.box2,.box1::before{
    width: 120px;
    height: 120px;
    border-radius: 50% 0 50% 50%;
  }
  .box1::before{
    background:#F3AC3C;
    content:'';
    display: block;
    transform: translate(-50%,50%);
  }
  .box2{
     background:#F3AC3C;
     border-radius:50%;
     transform: translate(0,-100%);
     z-index:-1
  }
</style>

#6. Missing Slice

菜鸟尝试

<div id="outer">  
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<style>
  body{
    background:#E3516E;
  }
  div{
    position:absolute;
    left: 50%;
    top:  50%;
    transform:translate(-50%,-50%);
  }
  #outer {
    width: 200px;
    height: 200px;
    border-radius:50%;
    overflow:hidden;
  }
  #outer div{
    width:100px;
    height:100px;
  }
  .box1{
    background:#51B5A9;
    transform:translate(-100%,-100%);
  }
  .box2{
    background:#FADE8B;
    transform:translate(0,-100%);
  }
  .box3{
    background:#F7F3D7;
    transform:translate(-100%,0);
  }
</style>

参考大佬

<div>
  <span></span>
  <span></span>
  <span></span>
</div>
<style>
  body{
    background:#E3516E;
  }
  div{
    position:absolute;
    left: 50%;
    top:  50%;
    transform:translate(-50%,-50%);
    width:200px;
    height:200px;
    display:flex;
    flex-wrap:wrap;
    border-radius:50%;
    overflow:hidden;
  }
  span{
    width:100px;
    height:100px;
  }
  span:nth-child(1){
    background:#51B5A9
  }
  span:nth-child(2){
    background:#FADE8B
  }
  span:nth-child(3){
    background:#F7F3D7
  }

</style>

#7. Leafy Trail

自己写的，有瑕疵，百分比不够精确

<div></div>
<div></div>
<div></div>
<style>
  body{
    background:#0B2429;
  }
  div {
    width: 150px;
    height: 150px;
    background: #998235;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:66% 0 66% 0;
  }
  div:nth-child(1){
  background:#1A4341;
  transform:translate(-83%,-50%);
  }
  div:nth-child(3){
  background:#F3AC3C;
  transform:translate(-17%,-50%);
  }
</style>

参考大佬

<div></div>
<div></div>
<div></div>
<style>
  body{
    background:#0B2429;
  }
  div {
    width: 150px;
    height: 150px;
    background: #998235;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border-radius:100px 0 100px 0;
  }
  div:nth-child(1){
  background:#1A4341;
  transform:translate(-125px,-50%);
  }
  div:nth-child(3){
  background:#F3AC3C;
  transform:translate(-25px,-50%);
  }
</style>

#8. Forking Crazy