CSS Battle #1 – Simply Square

Hey Everyone, today I solve some problems of CSS Battle In my live stream. So I thought about why I am not posting my solution here.

And here is the Solution….

In this post we are creating this shape i.e. Simply Square in Html and Css So let’s start.

Our first approach is very simple and straight forward in which we create a div and set particular values for that div with margin 0 in the body.

  body {
    margin: 0;
    background: #5d3a3a;
  }

  div {
    width: 200px;
    height: 200px;
    background: #b5e0ba;
  }

In our second solution, we used box-shadow, which is used to create a staple effect.

Box Shadow

The first two values are X and Y offsets, which can be negative. The third one is a blur radius. And the last before the color is spread radius, which is responsible for scale, which in our case I arbitrarily set to a big enough value to cover up the whole 400 x 300 screen.

  div {
    margin: -8px;
    width: 50vw;
    height: 66.6vh;
    background: #b5e0ba;
    box-shadow: 0 0 0 200px #5d3a3a;
  }