html - CSS如何将内部div边界半径与外部div边界半径对齐

.outerdiv {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #646464;
  background-color: yellow;
  padding-left: 10px;
  margin-top: 10px;
  height: 200px;
}

.innerdiv {
  -webkit-border-radius: 0px 10px 10px 0px;
  -moz-border-radius: 0px 10px 10px 0px;
  border-radius: 0px 10px 10px 0px;
  background-color: white;
  height: 200px;
}

<div class="outerdiv">
  <div class="innerdiv">
  </div>
</div>

我正在努力实现如所附图片所示。

我有外部div，背景为黄色，边框半径为10，padding-left：10px，在左侧显示黄色条。

我正在创建仅具有右上和右下边界半径的内部div。但是我在右上角变黄了。

最佳答案

减少border-radius的innerdiv，并且无需使用指定的浏览器将prefix更改为border-radius

.outerdiv {
  border-radius: 10px;
  border: 5px solid #646464;
  background-color: yellow;
  padding-left: 10px;
  margin-top: 20px;
  height: 100px;
}

.innerdiv {
  border-radius: 0px 6px 6px 0px;
  background-color: white;
  height: 100px;
  width: 100%;
}

<div class="outerdiv">
  <div class="innerdiv">
    Testing
  </div>
</div>