我的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中测试此功能。
