是否可以通过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。我知道因为我正在做绝对位置并试图将 divs 向右移动，所以这正在发生。但是因为我需要突出显示每个分区的边界，所以我不得不使用绝对位置。有人可以帮我吗？有解决办法吗？

Answer 1

你为什么不只使用 2 个蓝色元素和 3 个灰色元素，而不是一个大的灰色父元素？

<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="parent">
    <div class="activeSlide"></div>
    <div class="activeSlide"></div>
    <div class="diabledSlide"></div>
    <div class="diabledSlide"></div>
    <div class="diabledSlide"></div>
  </div>
</div>

Answer 2

您可以简单地重叠元素并为它们指定正确的宽度，以确保它们位于正确的位置。你也应该玩左边属性让它们出现在你想要的地方。

密钥应该在您可以在此处看到的属性中：

.greyParent > div{
  width: 25%;
}
.greyParent > div:nth-child(1){
  left:0%;
  width: 20%;
}
.greyParent > div:nth-child(2){
  left:15%;
}

我创建了这个小 jsfiddle，您可以将其视为我的意思的示例

Answer 3

试试这个，很好 ))

<div class="container">
  <div class="title">
    1/5
  </div>
  <div class="progress">
    <span class="active"></span><span class="active"></span><span></span><span></span><span></span>
  </div>
</div>


.container {
  display: flex;
}

.container .title {
  padding-right: 20px;
}

.container .progress {
  display: flex;
  width: 250px;
}

.container .progress span {
  display: block;
  height: 15px;
  width: 20%;
  background: gray;
  border: solid 1px #fff;
  border-radius: 7px;
  margin-right: -15px;
}

.container .progress span.active {
  background: blue;
}
.container .progress span:nth-child(1) {
  z-index: 40;
}

.container .progress span:nth-child(2) {
  z-index: 35;
}

.container .progress span:nth-child(3) {
  z-index: 25;
}

.container .progress span:nth-child(4) {
  z-index: 10;
}

JSfiddle 示例https://jsfiddle.net/5ph3uk94/

Answer 4

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

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

输出图像：

* {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>

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

Is it possible to achieve border radius curved inside through CSS3?

html

css

css-shapes