純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的標簽）之間添加注釋。