CODEWITHSUNDEEP
htmlcss
George Nikolaou
George Nikolaou

Reputation: 11

add 3rd box outside of the 2nd

I wrote a simple code to have two boxes center aligned with different dimensions and now I would like to add a third one based on the dimensions of the second one (grey) and to start outside of the second one. The second one (grey) is the core and the third one that I want to be the coil around the core but with it's own dimensions. That's why I want to be based on the dimensions of second. Please could you help me to make it? Thank you very much in advance!

Kind Regards, George

Here is the code:

<html>
    <head>
        <style>
            #container {
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .box1 {
                display: flex;
                justify-content: center;
                align-items: center;
                margin: 50px;
                background: black;
                height: 50px;
                width: 200px;
                border-radius:20px
            }

            .box2 {
                display: flex;
                justify-content: center;
                align-items: center;
                margin: -1000px;
                background: grey;
                height: 10px;
                width: 100px;
                border-radius:5px
            }
        </style>
    </head>

    <div id="container">

        <div class="box1">
            <div class="box2">
                <div></div>
            </div>
        </div>

    </div><!-- end #container -->
</html>

Upvotes: 1

Views: 46

Answers (1)

Nilesh Naik
Nilesh Naik

Reputation: 761

So considering the grey as the core and the red border around it as the coil. Is this how you wanted it to be done?

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 50px;
  background: black;
  height: 50px;
  width: 200px;
  border-radius: 20px
}

.box2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: -1000px;
  background: grey;
  height: 10px;
  width: 100px;
  border-radius: 5px;
  position: relative;
}

.box2:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid red;
  border-radius: 5px;
}
<div id="container">
  <div class="box1">
    <div class="box2">

    </div>
  </div>
</div>
<!-- end #container -->

Upvotes: 1

Related Questions