css - 带有 :before 和 z-index 的边界半径之外的 CSS 背景

Question

我正在尝试使用：before 和 z-index 在边界半径之外设置背景颜色。

问题是border-radius css start应该是一个圆圈，右侧后面应该是浅绿色以连接到html元素2，但它不起作用。

任何建议如何使它工作？

td {
    width:40px;
    height:40px;
    text-align: center;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
}

.middle {
  background-color: #b2edd6;
}

td.start {
    border-radius: 50%;
    background-color: #00AA6C;
    color: white;
    z-index: 1;
    position: relative;
}

td.start:before {
  content: "";
  background-color: #b2edd6;
  width: 50%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
}

<table style='table-layout:fixed;border-collapse: collapse;'>
  
  <tbody>
    <tr>
      <td class='start'>1</td>
      <td class='middle'>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

标签： css