CSS 3形状：“反转圆”或“剪出圆”
我想创build一个形状，我将其描述为“逆圆”：
图像是不准确的，因为黑线应该继续div元素的外边界。
这里是我现在的一个演示： http : //jsfiddle.net/n9fTF/
甚至有可能没有图像的CSS ？
更新：CSS3径向背景渐变选项
（对于那些支持它的浏览器 – 在FF和Chrome – IE10testing，Safari也应该工作）。
我最初的答案是一个“问题”，那就是那些没有扎实背景的情况。 这个更新创造了相同的效果，允许在圆和它的逆切割之间有一个透明的“间隙”。
看例子小提琴 。
CSS
.inversePair { border: 1px solid black; display: inline-block; position: relative; height: 100px; text-align: center; line-height: 100px; vertical-align: middle; } #a { width: 100px; border-radius: 50px; background: grey; z-index: 1; } #b { width: 200px; /* need to play with margin/padding adjustment based on your desired "gap" */ padding-left: 30px; margin-left: -30px; /* real borders */ border-left: none; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; /* the inverse circle "cut" */ background-image: -moz-radial-gradient( -23px 50%, /* the -23px left position varies by your "gap" */ circle closest-corner, /* keep radius to half height */ transparent 0, /* transparent at center */ transparent 55px, /*transparent at edge of gap */ black 56px, /* start circle "border" */ grey 57px /* end circle border and begin color of rest of background */ ); background-image: -webkit-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px); background-image: -ms-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px); background-image: -o-radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px); background-image: radial-gradient(-23px 50%, circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 55px, black 56px, grey 57px); }
原始答复
花了比我预期的更多的努力得到的Z索引工作（ 这似乎忽略负Z指数 ），但是， 这给了一个很好的干净的外观 （在IE9，FF，Chrome中testing）：
HTML
<div id="a" class="inversePair">A</div> <div id="b" class="inversePair">B</div>
CSS
.inversePair { border: 1px solid black; background: grey; display: inline-block; position: relative; height: 100px; text-align: center; line-height: 100px; vertical-align: middle; } #a { width: 100px; border-radius: 50px; } #a:before { content:' '; left: -6px; top: -6px; position: absolute; z-index: -1; width: 112px; /* 5px gap */ height: 112px; border-radius: 56px; background-color: white; } #b { width: 200px; z-index: -2; padding-left: 50px; margin-left: -55px; overflow: hidden; -webkit-border-top-right-radius: 20px; -webkit-border-bottom-right-radius: 20px; -moz-border-radius-topright: 20px; -moz-border-radius-bottomright: 20px; border-top-right-radius: 20px; border-bottom-right-radius: 20px; } #b:before { content:' '; left: -58px; top: -7px; position: absolute; width: 114px; /* 5px gap, 1px border */ height: 114px; border-radius: 57px; background-color: black; }
我不能从你的绘图中知道你想要点的圆angular，但是这里有一个可能性： http : //jsfiddle.net/n9fTF/6/
如果要点更加圆润，你需要把一些圈子，以便与大瓢混合。
不同的方法：箱阴影
这种方法使用IE9 + （ canIuse ） 支持的 CSS盒子阴影，
DEMO
输出：
HTML：
<div id="a"> <div id="b"></div> </div>
CSS：
#a{ overflow:hidden; border-radius:20px; position:relative; display:inline-block; } #a:before, #a:after{ content:''; width: 100px; border-radius: 50%; } #a:before { height: 100px; float:left; border: 1px solid black; background: grey; } #a:after { position:absolute; left:14px; top:-6px; height:114px; box-shadow: 1px 0px 0px 0px #000, 110px 0px 0px 68px #808080; background:none; z-index:-1; } #b { width: 200px; height: 100px; background:none; margin-left:-15px; border: 1px solid black; border-left:none; float:left; border-top-right-radius: 20px; border-bottom-right-radius: 20px; }
这是一个非常有趣的问题。 我最近发布了关于如何在CSS中制作反向边界半径的教程（这里） ，我认为这可以很容易地适应你的情况。
诀窍是使用一个非常简单的概念创build一个生成反向边界的跨度 – 非常厚的边界。 并通过隐藏它们来使用内部部分。 除了我提供的脚本之外，你需要做的是在左上angular添加另一个border-radius，因为我只使用右上angular。 通过绝对定位，使跨度alignment到你想要的项目的左侧，并相应地增加跨度的高度/宽度，并且你有相反的边界半径 。
有人从我发现的地方做了它…
JSFiddle： http : //jsfiddle.net/ajeN7/
和问题： CSS3倒圆angular
希望有帮助！
在偏移处引入位于灰色圆圈后面的绝对定位的无边界白色圆圈。 您将需要设置黑圈的z-index，以确保它位于白圈之上：
#c { position: absolute; border: 0; left: 30px; width: 100px; height: 100px; border-radius: 50px; background: white; }
演示。
