Drawing Two Circles with a line between them using CSS - Outer circle become deformed

Question

I've been looking for some examples (here) to help guide me with drawing two circles with a line between them (sort of like point A to point B graphic) using CSS. I'm very new to custom-CSS so forgive me if this is something simple I am missing in my config.

I have the CSS created with the graphic being displayed on my webpage, but depending on screen-size, my outer-circle can become deformed - I think it has something to do with my display: flex maybe? See the following screenshots: Good design

Bad design

Here is my CSS code specific to making the graphic

.circuit-graphic {
    display: flex;
    align-items: center;
    justify-content: center;
}

.circuit-graphic .circle {
    width: 60px;
    height: 60px;
    border: 2px solid #dc3545;
    border-radius: 50%;
    position: relative;
}

.circuit-graphic .circle:before {
    display: block;
    content: '';
    width: 40px;
    height: 40px;
    background: #dc3545;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.circuit-graphic .line {
    width: 100%;
    border: 5px solid #dc3545;
}

and I set it in my HTML like so in pseudo

<div class="row align-items-center">
   <div class="col-auto">
      [.........]
   </div>
   <div class="col">
      <div class="circuit-graphic">
         <div class="circle"></div>
         <div class="line"></div>
         <div class="circle"></div>
      </div>
   </div>
   <div class="col-auto">
      [.........]
   </div>
</div>

The goal I am trying to achieve is have two boxes on either side of the screen, with this graphic between them that can change it's width dynamically based on the screen size.

See my working example here.

score 0 · Accepted Answer · answered Apr 01 '22 at 16:20

The problem is in your line, the line is trying to occupy 100% of the space, in these cases what you need is to fill, this is achieved by making the element flex, and flex: 1, like this

.circuit-graphic .line {
    display: flex;
    flex: 1;
}

You can see this better here

.circuit-graphic {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.circuit-graphic .circle {
    width: 60px;
    height: 60px;
    border: 2px solid #dc3545;
    border-radius: 50%;
    position: relative;
}

.circuit-graphic .circle:before {
    display: block;
    content: '';
    width: 40px;
    height: 40px;
    background: #dc3545;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.circuit-graphic .line {
    border: 5px solid #dc3545;
    display: flex;
    flex: 1;
}

<div class="row align-items-center">
   <div class="col-auto">
   </div>
   <div class="col">
      <div class="circuit-graphic">
         <div class="circle"></div>
         <div class="line"></div>
         <div class="circle"></div>
      </div>
   </div>
   <div class="col-auto">
   </div>
</div>

Thank you so much for your help and explaining the cause. I originally made the width 100% just to fill void area but setting the `display: flex` and `flex:1` makes sense. — Franklin, Apr 01 '22 at 16:32

Elijah Barinov · Answer 2 · 2022-04-01T16:34:24.190

I've just set min and max widths constant by adding min-width and max-width.

UPD: the solution above is better with adding values to flex-shrink and flex-grow, but the balls will still start shrinking at the minimum screen sizes. So, the solution of mine fix this problem. But I guess hardcoding of min- and max-width is not the best solution.

.circuit-graphic .circle {
    min-width: 60px;
    max-width: 60px;
    height: 60px;
    border: 2px solid #dc3545;
    border-radius: 50%;
    position: relative;
}

Drawing Two Circles with a line between them using CSS - Outer circle become deformed

2 Answers2