CategoriesThink

Css Circle in a Rectangular Box

Its been years since i have done css, so i came to this assessment that wanted me to draw a css circle in a rectangular box. CSS in short of cascading style sheet definitely the answer to exactly what we need here. I rather thought at first when to play around with javasript to make it more interactive. But before we get our head up elsewhere, lets just focus one at a time.

First we need somewhere that we can immediately show what we are doing, in this case let us use codepen.io . Here, we could basicly write all the importance of a web page because we have html, css and also javascript. Even though we not yet need to use javascript yet. We just want to draw a rectangular box, inside of it we want to put 3 circle.

So, let’s write some code. We will start with html first, because we need to structure what output we want to display. Lets create css circle in a rectangular box.

<div class="rectangle">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
</div>

looks just about nice, although there is many way to put this circle inside our rectangular box, such as using ‘<span>’. But in future we just might want to use javascript to make this more interactive, so lets stick to div for now.

Now, let’s write css code. Because we define our class, instead of using id if we use span instead, we must define in our style sheet as a class.

.rectangle {
    border-radius: 10px;
    width: 350px;
    height: 90px;
    border: 1px solid #000;
    background-color: white;
    padding: 10px 10px 10px 100px;
}

.rectangle .circle {
  border: 1px solid #000;
  border-radius: 100%;
  height: 80px;
  width: 80px;
  margin: auto;
  display: inline-block;
}

first we define our rectangle to be a slightly round edges, than we need to set our width and height of our box to be just nice to fit our circles inside it. Than we to make our circle display an inline-block inside our rectangular. Let’s see how our code looks in code pen:

Nice, this is how I think it looks for my assessment. Let’s see that in codepen.

Next of my article, i want to show how to animate this box, read my other articles if you like.

Leave a Reply