在 CSS 中反转圆角? [英] Invert rounded corner in CSS?

问题描述

我有一个 css 代码:

I have a css code:

-moz-border-radius-topleft:50px;

我得到了结果:

有没有可能像这样给出:

Is there any possibilities to give like this:

推荐答案

在现代浏览器中，你可以使用 mask-image:

In modern browsers, you can use 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>

http://jsbin.com/eViJexO/1/

此外，请查看 http://www.html5rocks.com/en/tutorials/masking/adobe/，它描述了如何使用 mask-box-image 实现类似的结果.

Additionally, take a look at http://www.html5rocks.com/en/tutorials/masking/adobe/, which describes how to achieve similar result using mask-box-image.

这篇关于在 CSS 中反转圆角?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！