纯CSS3用于重叠 <div> 边界半径的元素

Question

我在容器<div>有不同数量的<div> ，每个都设置为display:inline-block ，有一个-webkit-border-radius和一些padding 。 我想以一种方式将每个<div>放置在一个方向上，右边的那个与左边的那个重叠，这样顶部和底部的边框就没有中断。 此外，理想情况下，容器<div>的宽度恰好与里面的样式div的大小相同（LAST_DIV的高度和宽度等于从最左边到最右边的div的距离）。

----------------
   --------------------/                  \
 /          /         |                    |
|    DIV_1 |    DIV_2 |    LAST_DIV        |
 \          \         |                    |
   ------------------- \                  /
                         ----------------

由于显示的<div>的数量不同，我排除了绝对定位。 我想避免使用javascript或在html文档中添加其他元素，因为我正在为同一个网站元素创建多个样式，其中一些样式可能没有必须重叠的舍入<div> 。

编辑：

我已经尝试只将边框半径设置到内部div的左边缘，并为容器div设置顶部和底部的边框，并为left设置负值，直到容器div的重叠边框消失。 当所有div都是同一个hight时，这给了我右端的问题，因为容器div现在扩展到了右端。 当个别div有不同的颜色时，这也给了我一些问题。

Answer 1

你可以尝试这样的事情：

演示

HTML ：

<div class='container'>
    <div>DIV_1</div><!--
    --><div>DIV_2</div><!--
    --><div>LAST_DIV</div>
</div>

相关CSS ：

.container, .container div { display: inline-block; }
.container div {
    padding: .25em 1.25em;
    border-radius: .65em 0 0 .65em;
}
.container div:not(:first-child) {
    margin: 0 0 0 -.65em; /* negative left margin, same value as border-radius */
}
.container div:last-child {
    padding: 1.25em;
    border-radius: .65em;
}

注意

具有display: inline-block;元素的元素之间的任何类型的空格（空格，制表符，换行符） display: inline-block; 对他们来说很重要。 这意味着容器中div之间的HTML中的换行符将在它们之间引入空格。 对此有一些修复 。 我选择的那个涉及在</div> （关闭子div的标签）和<div> （打开以下div的标签）之间添加注释。