不寻常的圆角标记

Question

我正在尝试构建一个简单的布局，其中一个盒子位于另一个盒子内，但是，虽然外部盒子的四个角都是圆形的，但内部盒子只有右侧的四个角。

我将添加开始时使用的基本标记，只是为了满足 SO 要求，但更容易看到 everything in action:

<div id="wrapper">
  <div id="left">
    <div class="placeholder">Placeholder</div>
  </div>
  <div id="main"></div>
</div>

内角不是完全圆的，虽然我知道原因是因为我没有为该元素定义任何其他边框，如果我定义了，最后，我不能拥有所有边框 6px 平滑地变厚（左边的外侧变厚）。

我实现的最接近的方法是 this one，使外部和内部的左边框 3px 具有所需的 6px 但是拐角附近的区域明显变薄了，这不是我想要的。

作为额外的，更多的是出于好奇，当我也尝试将左内边界也圆化时，我最终把所有东西都弄乱了，space 更靠近角落。这是为什么？

Answer 1

虽然我不是 relative/absolute 定位的忠实拥护者，但在这种情况下使用它们似乎是我解决问题所需要的：

body {
    background-color: #000;
    margin: 35px 35px 35px 50px;
}

#wrapper {
    -webkit-border-top-right-radius: 20px;
 -webkit-border-bottom-right-radius: 20px;
        -moz-border-radius-topright: 20px;
     -moz-border-radius-bottomright: 20px;
            border-top-right-radius: 20px;
         border-bottom-right-radius: 20px;

    border: 6px solid #0A1818;
    margin-left: 20px;
    min-height: 500px; /* demo only */
    position: relative;
    z-index: 1;
}

#left {
    -webkit-border-radius: 35px;
       -moz-border-radius: 35px;
            border-radius: 35px;

    background-color: #051113;
    border: 6px solid #0A1818;
    left: 35px;
    min-height: 500px; /* demo only */
    position: absolute;
    text-align: center;
    width: 30%;
    z-index: 2;
}

<div id="left">

    <div class="placeholder">Placeholder</div>

</div>
    
<div id="wrapper">

    <div id="main"></div>

</div>

我希望它对以后的人有所帮助:)

不寻常的圆角标记

Unusual rounded corners markup

css

rounded-corners