两个div，其中一个带有圆形的边框，另一个带有圆形倒置的边框

Question

我正在尝试创建一个指南组件，需要帮助。如何使用CSS使用相同的边框：

任何人都知道任何策略，任何方法都可以这样做，我应该学习什么？ 谢谢

Answer 1

我急着在这里举例。您必须对其进行调整。希望它无论如何都能指引您正确的方向。 =）

<nav class="navbar">
  <div class="navbar__item">Item </div>  
  <div class="navbar__item active">Item </div>  
  <div class="navbar__item">Item </div>  
  <div class="navbar__item">Item </div>
</nav>

<style>
  .navbar { 
    background-image: linear-gradient(to bottom, orange, orange 50%, green 50%);
    height: 50px;
    display: flex;
    flex-direction: row;
    border-bottom: 5px solid green;
    border-top: 5px solid orange;
  }

  .navbar__item {
    background: orange;
    padding: 20px;
    width: 400px;
    position: relative;
  }

  .navbar__item.active {
    background: green;
    border-radius: 10px 10px 0 0;
    margin: 0 10px;        
  }

 .navbar__item.active:before {
    position: absolute;
    z-index: 1000;
    left: -20px;
    top: 0px;
    content: "";
    width: 20px;
    background: orange;
    height: 50px;
    border-radius: 0 0 10px 10px;
  }

 .navbar__item.active:after {
    position: absolute;
    z-index: 1000;
    right: -20px;
    top: 0px;
    content: "";
    width: 20px;
    background: orange;
    height: 50px;
    border-radius: 0 0 10px 10px;
  }
</style>