css battle i scored 100 % number 3 code example

Example 1: css battle i scored 100 % number 3

<body>
  <div class="C"></div>
<div class="A">
  <div class="B"></div>
  </div>
<style>
  .A {
    width: 200px;
    height: 100px;
    background: #FE5F55;
    position:absolute;
    top:90;
    border-radius:20px;
    display:flex;
    justify-content:center;
    align-items:center;
  }
  .B{
    width:140px;
    height:40px;
    border-radius:20px;
    background-color:#A64942;
  }
  .C{
    width:200px;
    height:120px;
    border-radius:20px;
    background-color:#A64942;
    
  }
  body{
    background-color:#293462;
    display:flex;
    justify-content:center;
    align-items:center;
  }
</style>
</body>

Example 2: css battle i scored 100 %

<body>
<div class="A">
  <div class="B">
  <div class="C"></div>
  </div>
  </div>
 
 
<style>
  .A {
    width: 150;
    height: 150;
    background: #4F77FF;
    border-radius:105px;
    position: absolute;
    top:50;
    left:125;
    display:flex;
    justify-content:center;
    align-items:center;
    
    ;
    
  }
  .B{
    width:75px;
    height:125px;
    background-color:#F9E492;
    position:relative;
    top:62;
    left:-38;
    
    
    
    
  }
  .C{
    width:75px;
    height:75px;
    background-color:#9AD5FF;
    border-radius: 0 0 0 90px ;

    
  }
  body{
    background-color:#19191A;
    display:flex;
	justify-content:center;
    align-items:center;
    
  }
</style>
</body>

Example 3: css battle i scored 100 % number 2

<body>
<div class="A"></div>
<div class ="B"></div>
<div class ="C"></div>
<div class ="D"></div>
<style>
  .A {
    height: 100px;
    width: 50px;
    background: #F9E492;
    border-radius:0 90px 90px 0;
    transform: rotate(-90deg);
    position:absolute;
    top:75;
    left:125;
  }
  .B {
    height: 100px;
    width: 50px;
    background: #4F77FF;
    border-radius:0 90px 90px 0;
    transform: rotate(-0deg);
    position:relative;
    top:-50;
    left:50;
  }
  .C {
    height: 100px;
    width: 50px;
    background: #F9E492;
    border-radius:0 90px 90px 0;
    transform: rotate(90deg);
    position:relative;
    top:25;
    left:25;
  }
  .D {
    height: 100px;
    width: 50px;
    background: #4F77FF;
    border-radius:0 90px 90px 0;
    transform: rotate(180deg);
    position:absolute;
    top:150;
    left:150;
  }
  body{
    background-color:#191919;
    display: flex;
    justify-content:center;
    align-items:center;
  }
</style>
</body>

Tags:

Misc Example

Recent Posts