如何在进度条中部分使用边框半径和实际边框

Question

进度条中有多个部分，在本例中代表两种状态 - 已实现值和计划值。计划的部分应该有一个边框，并且接近进度条的末尾，它应该具有与背景相同的边框半径。

我的问题如下。半径在进度条中也可见，或者我不使用右角的边框半径并使用溢出：隐藏； “切断”段中不需要的溢出部分，但随后我失去了半径上的边界。

很难解释，图片可能更好。

这是我的 当前进度（img）

这基本上就是我想要的样子。有可能用一个相当简单的解决方案吗？

如何？ （图）

jsfiddle

<div class="progress-bar">
  <div class="segment"></div>
  <div class="segment"></div>
</div>

.progress-bar {
  position: relative;
  height: 40px;
  width: 400px;
  background: lightgray;
  border-radius: 24px;
  
  .segment {
    position: absolute;
    height: 40px;
    box-sizing: border-box;
    
    &:first-of-type {
      border-radius: 24px 0 0 24px;
      width: 70%;
      background: blue;
    }
    
    &:last-of-type {
      left: 70%;
      width: 28%;
      background: lightblue;
      border: 1px solid blue;
    }
  }
}

Answer 1

这几乎就是你想要的：

.progress-bar {
  position: relative;
  height: 40px;
  width: 400px;
  
  .segment {
    position: absolute;
    height: 40px;
    box-sizing: border-box;
    
    &:first-of-type {
      border-radius: 24px 0 0 24px;
      width: 70%;
      background: blue;
    }
    
    &:last-of-type {
      left: 70%;
      width: 30%;
      background: linear-gradient(to left, transparent 10px, blue 10px 11px, lightblue 11px), radial-gradient(circle at right, lightgray, white);
      border: 1px solid blue;
      border-radius: 0 24px 24px 0;
    }
  }
}

设置

border-right: none

不太明白最后一部分。

希望这有帮助！