将圆角添加到一组div

Question

我有一个简单的水平div和一些有色的孩子：

.bar {
  display: flex;
  height: 90px;
  
  border-radius: 20px;  
}

<div class="bar">
  <div class="segment" style="width: 150px; background: red;"></div>
  <div class="segment" style="width: 100px; background: blue;"></div>
  <div class="segment" style="width: 5px; background: green;"></div>
</div>

我想尝试使.bar div有圆角但看不到明显的方法去做。我知道这样：

.segment {
    &.first-child {
        border-top-left-radius: 25px;
        border-bottom-left-radius: 25px;
    }

    &.last-child {
        border-top-right-radius: 25px;
        border-bottom-right-radius: 25px;
    }
}

但是，如果其中一个.segment太小，那就行不通了，就像我的代码片段中的情况一样。

Answer 1

为什么不将边框半径放在条形上并隐藏溢出：

.bar {
  display: inline-flex;  /* make inline so it is only as wide as children */
  height: 90px;
  
  border-radius: 25px;  
  overflow: hidden;   /* add this */
}

<div class="bar">
  <div class="segment" style="width: 150px; background: red;"></div>
  <div class="segment" style="width: 100px; background: blue;"></div>
  <div class="segment" style="width: 5px; background: green;"></div>
</div>