CSS to create a round insert

Question

My sample codepen joins two divs and creates an inner circle in the middle:

<div class="container">
   <div class="toolbar">
     <div class="left-pane"></div>
     <div class="right-pane"></div>
   </div>
</div>


:root {
  --width: 80px;
  --height: 80px;
  --radious: 30%;
  --shadow-left: -5px -2px 5px 0px #888888;
  --shadow-right: 5px -2px 5px 0px #888888;
}

.container {
  padding: 2rem;
  height: 5rem;

  .toolbar {
    background: #b2b2b2;
    height: 5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;

    
    > .left-pane {
      position: relative;
      flex: 1 1 auto;
      width: 50%;
     // overflow: hidden;
      box-shadow: var(--shadow-left);
      
      &:after {
        position: absolute;
        content: "";
        top: -20px;
        right: -20px;
        background-color: #fff;
       // border: solid 1px green;
        border-radius: var(--radious);
        width: var(--width);
        height: var(--height);
      }
    }
    
    > .right-pane {
      position: relative;
      flex: 1 1 auto;
    //  border: solid 1px green;
      width: 50%;
      //overflow: hidden;
      box-shadow: var(--shadow-right);
      
      &:after {
        position: absolute;
        content: "";
        top: -20px;
        left: -20px;
        background-color: #fff;
      //  border: solid 1px green;
        border-radius: var(--radious);
        width: var(--width);
        height: var(--height);
      }
      
    }

  }
  
}

I'm trying to get the two sides to look more like a circle and can't seem to get it. I'm trying to make it look like the following:

I'm wondering if my current code will work to accomplish the sample view.
Another option I was thinking of is to just have a round white div centered in the middle and then put a round button inside of that.

Any thoughts or a possible fix?

Do you want it like this? https://nimb.ws/Y2GhmK – m4n0 Apr 01 '21 at 05:16 — m4n0, Apr 01 '21 at 05:16

score 3 · Accepted Answer · answered Apr 01 '21 at 05:27

You will have to use 50% for the radius (aka radious in your case). You also need to adjust the top and left positions of your pseudo element to adjust the circles. Changes in comments.

:root {
  --width: 80px;
  --height: 80px;
  --radious: 50%; /* Changed from 30% */
  --shadow-left: -5px -2px 5px 0px #888888;
  --shadow-right: 5px -2px 5px 0px #888888;
}

.container {
  padding: 2rem;
  height: 5rem;
}

.container .toolbar {
  background: #b2b2b2;
  height: 5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
}

.container .toolbar>.left-pane {
  position: relative;
  flex: 1 1 auto;
  width: 50%;
  box-shadow: var(--shadow-left);
}

.container .toolbar>.left-pane:after {
  position: absolute;
  content: "";
  top: -40px; /* Changed from -20px */
  right: -40px; /* Changed from -20px */
  background-color: #fff;
  border-radius: var(--radious);
  width: var(--width);
  height: var(--height);
}

.container .toolbar>.right-pane {
  position: relative;
  flex: 1 1 auto;
  width: 50%;
  box-shadow: var(--shadow-right);
}

.container .toolbar>.right-pane:after {
  position: absolute;
  content: "";
  top: -40px; /* Changed from -20px */
  left: -40px; /* Changed from -20px */
  background-color: #fff;
  border-radius: var(--radious);
  width: var(--width);
  height: var(--height);
}

<div class="container">
  <div class="toolbar">
    <div class="left-pane"></div>
    <div class="right-pane"></div>
  </div>
</div>

score 1 · Answer 2 · answered Apr 01 '21 at 06:41

:root {
  --width: 80px;
  --height: 80px;
  --radious: 30%;
  --shadow-left: -5px -2px 5px 0px #888888;
  --shadow-right: 5px -2px 5px 0px #888888;
}

.container {
  padding: 2rem;
  height: 5rem;
}
.container .toolbar {
  background: #b2b2b2;
  height: 5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
}
.container .toolbar .middle-button {
  position: relative;
  left: calc(50% - 2.5rem);
  background: white;
  width: 6rem;
  height: 6rem;
  bottom: 3rem;
  border-radius: 4rem;
}
.container .toolbar .middle-button::before {
  width: 5rem;
  height: 5rem;
  background: #0082C9;
  left: 0.5rem;
  top: 0.5rem;
  content: "+";
  color: white;
  font-weight: 700;
  font-size: 3rem;
  border-radius: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
}

<div class="container">
  <div class="toolbar">
    <div class="middle-button"></div>
  </div>
</div>

SASS:

:root {
  --width: 80px;
  --height: 80px;
  --radious: 30%;
  --shadow-left: -5px -2px 5px 0px #888888;
  --shadow-right: 5px -2px 5px 0px #888888;
}

.container {
  padding: 2rem;
  height: 5rem;

  .toolbar {
    background: #b2b2b2;
    height: 5rem;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    align-content: stretch;

    .middle-button{
      position: relative;
      left: calc(50% - 2.5rem);
      background: white;
      width: 6rem;
      height: 6rem;
      bottom: 3rem;
      border-radius: 4rem;
      
      &::before{
        width: 5rem;
        height: 5rem;
        background: #0082C9;
        left: .5rem;
        top: .5rem;
        content: '+';
        color: white;
        font-weight: 700;
        font-size: 3rem;
        border-radius: 5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
      }
      
    }
    

  }
  
}

I hope this is what you are looking for... I have removed the 2 divs and added a new element for the middle button.

The answer makes use of ::before pseudo-element to draw the foreground button and the button is actually the with white background.

This is what I originally wanted to do and use only one div. Thanks for the solution — adviner, Apr 01 '21 at 14:27

CSS to create a round insert

2 Answers2