将圆角添加到一组div

Question

我有一个简单的水平div，里面有几个有色的孩子：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我想尝试让.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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;