CSS创建圆形插入[重复]

Question

我的示例codepen 加入了两个 div 并在中间创建了一个内圈：

<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);
      }
      
    }

  }
  
}

我试图让两侧看起来更像一个圆圈，但似乎无法获得它。我试图让它看起来像下面这样：

我想知道我当前的代码是否可以完成示例视图。
我正在考虑的另一个选择是在中间放置一个圆形白色 div，然后在其中放置一个圆形按钮。

有什么想法或可能的解决方法吗？

Answer 1

: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;
      }
      
    }
    

  }
  
}

我希望这就是您要找的...我已经删除了 2 个 div 并为中间按钮添加了一个新元素。

答案是利用::before伪元素来绘制前景按钮，而按钮实际上是白色背景的。

Answer 2

您必须使用50% 作为半径（在您的情况下也称为radius）。您还需要调整伪元素的top 和left 位置以调整圆圈。 cmets 的变化。

: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>