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

【问题标题】：CSS to create curved corner between two elements?CSS在两个元素之间创建弯角？
【发布时间】：2011-06-03 19:58:45
【问题描述】：

我的 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 边框半径 CSS。

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

请注意，<ul> 以灰色表示，但在实际设计中它将是白色的。另外，我计划在选择 <li> 时使用 Javascript 正确定位 <div>。

【问题讨论】：

您是从其他网站复制的吗？他们是怎么做到的？
如果他确实从一个他们问同样问题的网站上得到它，而且我认为你不能用 css 反转，你可能不得不求助于图像
@drachenstern：不，我是用 Photoshop 制作的。
关于 Photoshop 插图的问题会自动获得我的 +1 评价
如果问题包含自定义绘图，您总能看出它是一个好问题。

标签： html css rounded-corners css-shapes

【解决方案1】：

好吧，事实证明，我自己设法解决了这个问题。我拼凑了一个演示——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 中测试过。

【讨论】：

恭喜你自己破解了它。看起来很锋利，我以后会记住这一点的。
@Yi Jiang：感谢您在 jsfiddle 上修复问题。我粘贴了然后忘了分开东西......
我发布了一个基于您的代码的新解决方案，该解决方案使用的代码要少得多，并且包括能够使用gradient 背景。

【解决方案2】：

更清洁的解决方案（更少的代码和允许背景渐变）

See the fiddle（或another），它正在使用这个html：

<ul class="selectable">
    <li>Title</li>
    <li class="active">Title</li>
    <li>Title</li>
    <li>Title</li>
</ul>
<div class="right">
    <div class="content">This is content</div>
</div>

还有这个css（关键是允许伪元素上的border-radius和border-width为你做倒圆；我省略了gradient代码。）：

ul.selectable {
    padding-top: 1em;
    padding-bottom: 1em;
    width: 50%;
    float: left;
}
ul.selectable li {
    margin: 1em 1em 1em 2em;
    padding: 1em;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    background-color: #dfd24f;
    position: relative;
}
ul.selectable li.active {
    margin-right: 0;
    background-color: #4f9ddf;
    -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:before,
ul.selectable li.active:after {
    content: '';
    position: absolute;
    left: 100%; /* I use this instead of right: 0 to avoid 1px rounding errors */
    margin-left: -8px; /* I use this because I am using left: 100% */
    width: 8px;
    height: 8px;
    border-right: 8px solid #4f9ddf;
    z-index: -1;    
}

ul.selectable li.active:before {
    top: -8px;
    border-bottom: 8px solid  #4f9ddf;
    -webkit-border-bottom-right-radius: 16px;
    -khtml-border-bottom-right-radius: 16px;
    -moz-border-radius-bottomright: 16px;
    border-bottom-right-radius: 16px;
}
ul.selectable li.active:after {
    bottom: -8px;
    border-top: 8px solid  #4f9ddf;
    -webkit-border-top-right-radius: 16px;
    -khtml-border-top-right-radius: 16px;
    -moz-border-radius-topright: 16px;
    border-top-right-radius: 16px;
}
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;
}

【讨论】：

【解决方案3】：

我想出了一个需要较少标记的解决方案。总而言之，它使用白色圆角边框代替了边距，然后我们将活动 li 定位在白色圆角边框后面，以实现反转边框半径效果。

http://jsfiddle.net/zrMW8/

<ul class="selectable">
    <li>
        <a href="#">Title</a>
    </li>
    <li class="active">
        <a href="#">Title</a>
    </li>
    <li>
        <a href="#">Title</a>
    </li>
    <li>
        <a href="#">Title</a>
    </li>
</ul>
<div class="right">
    <div class="content">This is content</div>
</div>

而且 CSS 也更少！（这是心灵弯曲）：

a { color: #000; text-decoration: none;}

ul.selectable {
    padding: 1em 1em;
    width: 40%;
    float: left;
}

ul.selectable li {
    margin:  -1em 0 0 0;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    border: solid #fff 1em;
    position: relative;
}

ul.selectable li a {
   background-color: #dfd24f;
    padding: 1em;
    display: block;
       border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
}

ul.selectable li.active {
    margin: -1em -1em -1em 1em;
    border: solid #4f9ddf 1em;
    border-left: solid #fff 1em;
    background-color: #4f9ddf;
    position: static;
}

ul.selectable li.active a {
    margin: 0 0 0 -1em;
    border-left: solid #4f9ddf 1em;
    background-color: #4f9ddf;
    position: static;
    text-indent: -1em;
}

div.right {
    float: left;
    padding-top: 3em;
    width: 50%;
    margin-left: -1em;
}
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;
}

说实话，我不确定它是不是更好的版本，它确实使渐变/图像背景变得容易（至少对于非活动 li 而言），但您不能将图像/渐变背景应用于身体。它也是“坏魔法”，因为它以非直观的方式工作。

【讨论】：

【解决方案4】：

不是真的，对不起，每个

Invert rounded corner in CSS?

【讨论】：

【解决方案5】：

要在非实体背景上执行此操作，我认为您无法使用 CSS 来执行此操作，但您可以使用画布或 SVG 来达到相同的效果 - 不过，这并不完全符合您的要求。

但是，似乎有一个proposal for negative border radius 可以解决问题。也许有一天，对吧。

【讨论】：

我很确定他是按照自己的意愿使用 CSS 完成的。我不确定你的回答是什么意思。
我同意使用画布或 SVG 可能是目前在非纯色背景上执行此操作的唯一方法。

【解决方案6】：

这个漂亮的Inverse Border Radius in CSS tutorial 可以解决问题。解释如何为标签做反向边界半径。但它可以很容易地调整以简化您的 css，因为它使用 :after 而不是创建太多额外的元素。

【讨论】：