在 CSS 中反转圆角？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4012085/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Invert rounded corner in CSS?
提问by Mubeen
I have a css code:
我有一个 css 代码：
-moz-border-radius-topleft:50px;
I get the result:
我得到结果：
Is there any possibilities to give like this:
有没有可能给出这样的：
回答by Chris Burton
Just to update this, it seems you can in multiple ways.
只是为了更新这个，似乎你可以通过多种方式。
Here is mine using border-image
Using border image
使用边框图像
html
html
<div><img src="https://s3.amazonaws.com/resized-images-new/23292454-E6CD-4F0F-B7DA-0EB46BC2E548" /></div>
css
css
div {
width: 200px;
border-width: 55px;
-moz-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
-webkit-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
-o-border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
border-image: url(http://i47.tinypic.com/2qxba03.png) 55 repeat;
margin: 50px auto;
}
Using radial gradient
使用径向渐变
html
html
<div class="inner-round"></div>
css
css
.inner-round {
background-image:
radial-gradient(circle at 0 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 0, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 14px, #c00 15px),
radial-gradient(circle at 0 100%, rgba(204,0,0,0) 14px, #c00 15px);
}
回答by Gajus
In modern browsers, you can use mask-image:
在现代浏览器中，您可以使用mask-image：
#aux-container {
width: 100px;
height: 100px;
background: #f00;
-webkit-mask-image: radial-gradient(circle 10px at 0 0, transparent 0, transparent 20px, black 21px);
}<div id="aux-container"></div>Additionally, take a look at http://www.html5rocks.com/en/tutorials/masking/adobe/, which describes how to achieve similar result using mask-box-image.
此外，请查看http://www.html5rocks.com/en/tutorials/masking/adobe/，它描述了如何使用mask-box-image.
回答by web-tiki
You can also use and inline svgwith a path element:
body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}<svg viewbox="0 0 10 10">
<path d="M9 1 V9 H1 V3 Q3 3 3 1" fill="#fff"/>
</svg>In this example, I use a cubic bezier curvefor the inverted round edge.
在这个例子中，我对倒圆边使用三次贝塞尔曲线。
With this approach, you can also fill the shape with an imageor gradient:
通过这种方法，您还可以使用图像或渐变填充形状：
body{background:url('http://i.imgur.com/RECDV24.jpg');background-size:cover;}
svg{width:30%;}<svg viewbox="0 0 10 6.7">
<defs>
<clipPath id="clip">
<path d="M9 1 V6.7 H1 V3 Q3 3 3 1" fill="#fff"/>
</clipPath>
</defs>
<image xlink:href="http://i.imgur.com/qi5FGET.jpg" x="0" y="0" height="6.7" width="10" clip-path="url(#clip)"/>
</svg>回答by Christopher Bull
Unfortunately, there is currently not a solution based on official or implemented CSS Specs :(
不幸的是，目前还没有基于官方或实施的 CSS 规范的解决方案 :(
However, as other people have added, there are possible solutions (or cheats?) you can do to achieve the same effect using JS libraries or complex HTML/CSS implementations. I came across this issue whilst looking for a way to make even more complex corners than the OP without using images.
但是，正如其他人所补充的那样，您可以使用 JS 库或复杂的 HTML/CSS 实现来实现相同的效果。我在寻找一种在不使用图像的情况下制作比 OP 更复杂的角的方法时遇到了这个问题。
I have filed a bug (Feature Request) over at the webkit site - as there does not appear to be one filed already.
我已经在 webkit 站点上提交了一个错误（功能请求）——因为似乎还没有一个提交。
回答by Danield
This can be done with a radial gradient.
这可以通过径向渐变来完成。
div {
width: 20vw;
height: 20vw;
background: radial-gradient(circle at top left,transparent 4vw, darkblue 4.1vw);
}<div></div>Just for fun, additional inverted corners can be added by defining multiple backgrounds - one for each corner:
只是为了好玩，可以通过定义多个背景来添加额外的倒角 - 每个角一个：
div {
width: 40vw;
height: 40vw;
position: relative;
background-color: darkblue;
--circle: radial-gradient(circle,white 8vw, darkblue 8.1vw);
}
div:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: var(--circle), var(--circle), var(--circle), var(--circle);
background-size: 18vw 18vw;
background-position: -40% -40%, 140% -40%, -40% 140%, 140% 140%;
background-repeat: no-repeat;
}<div></div>回答by G-Cyrillus
For a plain background-color, you actually can, using pseudo element and box shadow to draw background-color instead, and it will not hide backgrounds of parent's container, you will actually see them through.
对于纯背景颜色，您实际上可以使用伪元素和框阴影来代替绘制背景颜色，并且它不会隐藏父容器的背景，您实际上会通过.
What you need is a browser that understands :before/:after and box-shadow :) ...
你需要的是一个能理解 :before/:after 和 box-shadow 的浏览器 :) ...
For IE8 , you can draw hudge borders instead shadows. http://codepen.io/anon/pen/fFgDo
对于 IE8 ，您可以绘制粗边框而不是阴影。http://codepen.io/anon/pen/fFgDo
box-shadow approach : http://codepen.io/anon/pen/FwLnd
box-shadow 方法：http: //codepen.io/anon/pen/FwLnd
div {
margin:2em; /* keep it away from sides to see result */
padding:2em;/* for test to size it when empty */
position:relative; /* reference to set pseudo element where you wish */
overflow:hidden;/* you do not want the box-shadow all over the page */
}
div:before {
content:'';
position:absolute;
width:80px;
height:80px;
top:-40px;
left:-40px;
border-radius:100%;
box-shadow:0 0 0 2000px #1D005D;/* here draw the shadow inside its parent , maybe z-index will be required for content */
}
pseudo element can take any shape, and transform via css and set any where in its element to draw kind of holes through : examples : http://codepen.io/gc-nomade/pen/nKAka
伪元素可以采用任何形状，并通过 css 进行转换并设置其元素中的任何位置以通过以下方式绘制孔：示例：http: //codepen.io/gc-nomade/pen/nKAka
回答by Jon Mifsud
There are ways you could solve this issue by using just CSS - however it would depend on the colour of your background (if solid its easier) if you have a pattern for background it might be slightly more complex.
有一些方法可以通过只使用 CSS 来解决这个问题——但是它取决于背景的颜色（如果纯色更容易），如果你有背景图案，它可能会稍微复杂一些。
I cover a basic example here of how to make an Inverse Border Radius in CSS (here). This uses a trick with the size of Border to use the inside, you might have to do some positioning to get it to work properly however as you can see its possible. Especially if you specify a background-colorfor each span.
我在这里介绍了如何在 CSS 中制作反向边框半径的基本示例（此处）。这使用了一个带有 Border 大小的技巧来使用内部，您可能需要做一些定位才能使其正常工作，但是正如您所看到的那样。特别是如果您background-color为每个span.
If you want all 4 corners you would have to add a separate class for each spaninside your div, and each class would simulate a corner, top left, top right etc.
如果您想要所有 4 个角，则必须为spandiv 内的每个角添加一个单独的类，每个类将模拟一个角、左上角、右上角等。
回答by Kobi
No.
If you have solid backgroundyou can probably use css to create the bite.
Otherwise, there isn't anything special you can do beyong using PNGs, much like you'd create round corners before border-radius.
不。如果您有纯色背景，您可能可以使用 css 来创建咬合。
否则，除了使用 PNG 之外，您无法做任何特别的事情，就像您之前创建圆角一样border-radius。
回答by Milox
actually there's one way, like this:
实际上有一种方法，就像这样：
<div style="background-color: red;height: 12px; width: 12px;">
<div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
</div>
</div>
but as @Domenic says you'll need a solid background, otherwise you'll get this:
但正如@Domenic 所说，你需要一个坚实的背景，否则你会得到这个：
<div style=" background-color:#666">
<div style="background-color: red;height: 12px; width: 12px;">
<div style="margin-top: 40px; height: 12px; width: 12px; moz-border-radius-topright: 12px;
-webkit-border-top-right-radius: 12px; border-top-right-radius: 12px; background-color:#fff">
</div>
</div>
回答by Omkar Vaity
It can be done using after element.
check this jsfiddle linkenter code here
可以使用 after 元素来完成。
检查这个jsfiddle链接enter code here
