项目之间带有拱形的样式菜单

Question

我需要设置菜单样式，如下面的屏幕截图所示。我自己还没有想出有效的方法。有人有什么想法可以帮助我吗？

我想不出如何编码。

Answer 1

使用伪元素

::before

绝对定位在相对定位的 LI 元素内。玩转边框和半径：

.list {
  line-height: 1rem;
  list-style: none;
  padding: 0;
  
  >li {
    position: relative;
    align-items: center;
    padding: 0.6rem 1rem;
    border-left: 1px solid #000;
    
    &::before {
      position: absolute;
      left: 0;
      top: 50%;
      content: "";
      width: 0.6rem;
      border: solid #000;
      border-width: 1px 0 0 0;
    }
    
    &:first-child {
      font-weight: bold;
      border-left: 0;
      
      &::before {
        height: 1rem;
        top: 1.1rem;
        border-radius: 10px 0 0 0;
        border-width: 1px 0 0 1px;
      }
    }
    
    &:last-child {
      border-left: 0;
      
      &::before {
        height: 1.1rem;
        top: 0rem;
        border-radius: 0 0 0px 10px;
        border-width: 0 0px 1px 1px;
      }
    }
  }
}

<div class="list">
  <li>Lorem</li>
  <li>Ipsum</li>
</div>
<div class="list">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
</div>
<div class="list">
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Sit</li>
  <li>Amet</li>
</div>