DEV Community

Nic
Nic

Posted on • Originally published at blog.nicm42.co.uk on

CSS Battle 22

I am (very slowly) working through CSS Battle. It gives you a picture that you have to recreate in CSS. To score highly you have to have as few characters as possible. But I ignore that and simply aim to get 100%. I thought I'd talk through one I did recently, Target 22 (Cloud)

Cloud target

When I initially looked at this I thought I wanted a circle for the top of the cloud, a circle for the left and a short wide rectangle for the right and bottom. I ended up not doing that - I found four elements was slightly easier.

For the HTML I had four divs - the bottom one at the top because I wanted everything else on top of it.

<div class="bottom"></div>
<div class="left"></div>
<div class="top"></div>
<div class="right"></div>

Enter fullscreen mode Exit fullscreen mode

Then I added the background colour (which they give you)

  body{
    background: #F5D6B4;
  }

Enter fullscreen mode Exit fullscreen mode

I find that positioning the elements absolutely makes things easier. I also for a while tried using grid and that seemed to get me very close to 100% without actually getting 100%, even though it was identical.

  div {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #D86F45;
  }

Enter fullscreen mode Exit fullscreen mode

The width and height work for both the top and left circles, so all I had to do was to position them.

  .left {
    top: 115px;
    left: 100px;
  }
  .top {
    top: 85px;
    left: 180px;
  }

Enter fullscreen mode Exit fullscreen mode

I had to resize the right one, and then position it

  .right {
    width: 50px;
    height: 50px;
    top: 165px;
    left: 250px;
  }

Enter fullscreen mode Exit fullscreen mode

At this point I had a gap at the bottom. Although I could have played with the right one, I already said that all of my divs are circles. So I decided it would be slightly less code to just add in a rectangle to fill the space

  .bottom {
    border-radius: 0;
    width: 120px;
    height: 50px;
    top: 165px;
    left: 150px;    
  }

Enter fullscreen mode Exit fullscreen mode

And that's it, done! That seemed the simplest way to do it to me, but if you did it another way I'd love to see it.

Top comments (0)