是否可以通过CSS3实现向内弯曲的边界半径？

Question

是否有可能实现如上图所示的效果？到目前为止，我已经尝试过以下代码。

.greyParent {
  height: 19px;
  border-radius: 7px;
  background: rgb(196, 196, 196);
}
.greyParent > .activeSlide {
  background: rgb(0, 97, 188);
  border-radius: 7px;
  border-right: 1px solid #fff;
  float: left;
  width: 20%;
  height: 19px;
  position: absolute;
}
.greyParent > .activeSlide:first-child {
  left: 0%;
  z-index: 5;
}
.greyParent > .activeSlide + .activeSlide {
  left: 16%;
  z-index: 4;
}

<div class="col-xs-4 col-sm-2 col-md-2">
  <span class="slideNo">1/5</span>
</div>
<div class="col-xs-8 col-sm-10 col-xs-9 progressImage">
  <div class="greyParent">
    <div class="activeSlide">

    </div>
    <div class="activeSlide">

    </div>
  </div>
</div>

我需要根据选项卡附加 .activeSlide div 标签。我面临的问题是，当我为第五张幻灯片附加 5 个 .activeSlide div 标签时，它没有占用整个父 div 标签，即 div.greyParent。我明白，因为我正在做绝对位置并试图将 div 向右移动，这正在发生。但是因为我需要突出显示每个分区的边界，所以我不得不使用绝对位置。有人可以帮我吗？有什么解决办法吗？

Answer 1

您可以使用:before伪:after元素来创建此形状。

1. 分别在每个列表项的左/右角上绘制相等的圆width和圆。height
2. 添加或box-shadow以在单元格之间创建边框效果。1px2px

输出图像：

* {box-sizing: border-box;}

ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 20px;
}

ul li {
  position: relative;
  background: gray;
  height: 16px;
  width: 60px;
}

ul li:before,
ul li:after {
  box-shadow: 2px 0 0 #fff;
  border-radius: 100%;
  position: absolute;
  background: gray;
  height: 16px;
  content: '';
  width: 16px;
  left: -8px;
  top: 0;
}

ul li:first-child:before {
  box-shadow: none;
}

ul li:after {
  right: -8px;
  left: auto;
}

ul li.active,
ul li.active:before,
ul li.active:after {
  background: blue;
  z-index: 1;
}

<ul>
  <li class="active"></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>