纯CSS3用于重叠<div>元素与边界半径</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

您可以尝试这样的事情：

demo

<强> 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;的元素之间的任何类型的空格（空格，制表符，换行符）都很重要。这意味着容器中div之间的HTML中的换行符将在它们之间引入空格。 There are a few fixes for this。我选择的那个涉及在</div>（子div的结束标记）和<div>（以下div的开头标记）之间添加注释。