CSS在两个元素之间创建弯角？
我的用户界面左侧有一个无序列表。选择列表项后，其右侧会出现一个 div。我希望在
将蓝色
< 的边缘;ul>，我计划做这样的事情：li {
right-margin: 2em;
border-radius: 8px;
}
li.active {
right-margin: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
有没有更好的方法将
< 的边缘/代码>?显然，我还将包括 webkit 和 mozilla 边框半径 CSS。
我不确定的主要事情是活动
请注意，
时使用 Javascript 正确定位。
My UI has an unordered list on the left. When a list item is selected, a div appears on the right of it. I'd like to have a curved outer corner where the <li> and the <div> meet. Some people call this a negative border radius or an inverted corner. See the white arrow in the image below.
To extend the blue <li> to the edge of the <ul>, I'm planning to do something like this:
li {
right-margin: 2em;
border-radius: 8px;
}
li.active {
right-margin: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
Is there a better way to extend the <li> to the edge of the <ul>? Obviously, I'll include the webkit and mozilla border radius CSS as well.
The main thing I'm unsure about is that outer corner underneath the bottom right corner of the active <li>. I have some ideas, but they seem like hacks. Any suggestions?
NOTE that the <ul> is indicated in grey, but it would be white in the real design. Also, I'm planning to use Javascript to position the <div> correctly when an <li> is selected.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
好吧，事实证明，我自己解决了这个问题。我编写了一个演示 - 查看一下。
本质上，需要几个额外的 DOM 元素和相当数量的 CSS。正如@Steve 提供的链接中提到的，需要扎实的背景。我不相信有任何方法可以在渐变背景或其他图案上做到这一点。
我最终得到这样的 HTML：
我没有优化任何 CSS，因为我只是将它们组合在一起。但也许它会对其他人有所帮助。我只在 Mac OSX 上的 Google Chrome 中对此进行了测试。
Well, as it turns out, I managed to solve the problem myself. I hacked together a demo -- check it out.
Essentially, several additional DOM elements are required and a fair amount of CSS. And as mentioned in the link provided by @Steve, a solid background is required. I don't believe there is any way to do this over a gradient background or other pattern.
I ended up with HTML like this:
I haven't optimized any of the CSS as I just hacked it together. But perhaps it will help someone else. I've only tested this in Google Chrome on Mac OSX.
更干净的解决方案（更少的代码和允许背景渐变）
查看小提琴（或另一个），它使用这个html：
和这个css（关键是允许伪元素上的
border-radius和border-width为您制作倒圆；我省略了gradient代码>代码。）：Cleaner Solution (Less Code & Background Gradient Allowed)
See the fiddle (or another), which is using this html:
And this css (the key is to allow the
border-radiusandborder-widthon the pseudo-elements to make the inverted circle for you; I've omitted thegradientcode.):我想出了一个需要更少标记的解决方案。综上所述，它不使用边距，而是使用白色圆角边框，然后我们将活动 li 放置在白色圆角边框后面，以实现倒置边框半径效果。
http://jsfiddle.net/zrMW8/
并且 CSS 也更少！ （这是令人费解的）：
说实话，我不确定这是一个更好的版本，它确实使渐变/图像背景变得容易（至少对于非活动的李来说），但你不能应用图像/渐变背景到身体。从它以非直观的方式起作用的意义上来说，它也是“坏魔法”。
I came up with a solution that requires less markup. In summary, instead of using margins it uses white rounded borders, then we position the active li behind the white rounded borders to achieve the inverted border-radius effect.
http://jsfiddle.net/zrMW8/
And less CSS too! (this is mind bending):
To tell you the truth I'm not sure it's a better version, it does make gradient/image backgrounds easy (for non active li's, at least) but you can't apply an image/gradient background to the body. It's also "bad magic" en the sense that it works in a non-intuitive way.
要在非固体背景上做到这一点，我认为你不能使用 CSS 来做到这一点，但你可以使用 canvas 或 SVG 来达到相同的效果 - 但不完全是你所要求的。
然而，似乎确实有一个负边框半径的提案可以解决这个问题问题。也许有一天，对吧。
To do this over a non-solid bg, I don't think you can do it with CSS, but you could use canvas or SVG to the same effect - not exactly what you asked for, though.
However, there does appear to be a proposal for negative border radius that would solve the problem. Maybe some day, right.
这个很好的 CSS 中的反向边框半径教程 可以解决这个问题。解释如何为选项卡执行反向边框半径。但它可以很容易地适应简化你的 CSS，因为它使用
:after而不是创建太多额外的元素。This nice Inverse Border Radius in CSS tutorial could do the trick. Explains how to do inverse border radius for tabs. But it could be easily adapted to streamline your css since it uses
:afterinstead of creating too many extra elements.