CSS在两个元素之间创建弯曲角？

我的UI在左边有一个无序的列表。选择列表项时，右侧会显示一个div。我想有一个弯曲的外角，< li>和< div>遇到。有些人称之为负边界半径或倒角。见下图中的白色箭头。

延伸蓝色< li>到< ul>的边缘，我打算做这样的事情：

li { 
    right-margin: 2em; 
    border-radius: 8px; 
}

li.active { 
    right-margin: 0; 
    border-bottom-right-radius: 0; 
    border-top-right-radius: 0;
}

是否有更好的方法来扩展< li>到< ul>的边缘显然，我将包括webkit和mozilla border radius CSS。

我不确定的主要事情是活动< li>右下角下面的外角。我有一些想法，但他们看起来像黑客。有什么建议么？

注意，< ul>以灰色表示，但在实际设计中将是白色的。此外，我打算使用Javascript来定位< div>当< li>选择。

解决方法

好吧，事实证明，我设法解决这个问题自己。我黑客一起演示 – check it out。

基本上，需要几个额外的DOM元素和大量的CSS。正如在@Steve提供的链接中提到的，需要一个坚实的背景。我不相信有任何办法做到这一点在渐变背景或其他模式。

我结束了像这样的HTML：

ul.selectable {
  padding-top: 1em;
  padding-bottom: 1em;
  width: 50%;
  float: left;
}
ul.selectable li {
  margin: 0 3em 0 4em;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
  -moz-border-radius: 8px;
}
ul.selectable li.active {
  margin-right: 0;
}
ul.selectable li.active dl {
  background-color: #4f9ddf;
}
ul.selectable li dt {
  background-color: #dfd24f;
  padding: 1em;
  margin-left: -2em;
  margin-right: -2em;
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
ul.selectable li dd {
  padding: 0.25em;
  background-color: #fff;
}
ul.selectable li.active dt {
  background-color: #4f9ddf;
  margin-right: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -khtml-border-top-right-radius: 0;
  -khtml-border-bottom-right-radius: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
ul.selectable li.active dd.top {
  -webkit-border-bottom-right-radius: 8px;
  -khtml-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
}
ul.selectable li.active dd.bot {
  -webkit-border-top-right-radius: 8px;
  -khtml-border-top-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  border-top-right-radius: 8px;
}
div.right {
  float: left;
  padding-top: 3em;
  width: 50%;
}
div.content {
  height: 15em;
  width: 80%;
  background-color: #4f9ddf;
  padding: 1em;
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

<ul class="selectable">
  <li>
    <dl>
      <dd class="top"></dd>
      <dt>Title</dt>
      <dd class="bot"></dd>
    </dl>
  </li>
  <li class="active">
    <dl>
      <dd class="top"></dd>
      <dt>Title</dt>
      <dd class="bot"></dd>
    </dl>
  </li>
  <li>
    <dl>
      <dd class="top"></dd>
      <dt>Title</dt>
      <dd class="bot"></dd>
    </dl>
  </li>
</ul>
<div class="right">
  <div class="content">This is content</div>
</div>

我没有优化任何CSS，因为我只是黑客一起。但也许它会帮助别人。我只在Mac OSX上的Google Chrome中测试此功能。