在CSS中如何实现圆角相反效果？

Question

我有一个CSS代码：

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

我得到了以下结果：

是否有可能像这样呈现：

- Mubeen

---

一个在线代码生成器：https://css-generators.com/custom-corners/ - Temani Afif

Answer 1

在现代浏览器中，您可以使用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实现类似的效果。

- Gajus

---

非常感谢你提供的径向渐变 - 我之前使用的并不完美，但现在我已经能够实现我想做的事情了！看看，结果还是挺酷的 :) https://jsfiddle.net/emilbroll/dgtceno3/3/ - Emil

Answer 2

仅作更新，似乎有多种方式可以实现。

Lea Verou发布了一种解决方案。

这是我使用border-image的示例

使用边框图像

html

<div><img src="https://s3.amazonaws.com/resized-images-new/23292454-E6CD-4F0F-B7DA-0EB46BC2E548" /></div>

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;   
}

使用径向渐变

Lea Verou的解决方案

HTML

<div class="inner-round"></div>

css

：CSS（层叠样式表）是一种用于描述网页内容展示方式的语言，它可以控制HTML元素的外观、布局和其他方面的样式。

.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);
}

- Chris Burton

---

另一个方法，同样来自Lea Verou。http://lea.verou.me/2011/08/better-css3-ticket-like-tags/ - Dalex

在你的例子中，图片已经损坏了。 - Jitendra Vyas

Answer 3

您还可以使用内联SVG和path元素：

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>

在这个例子中，我使用三次贝塞尔曲线来制作倒圆边缘。

通过这种方法，你也可以用图像或渐变色填充形状：

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>

- web-tiki

---

我选择使用这个方案，而不是基于背景的解决方案，因为它也适用于打印。不错。 - John Rix

Answer 4

这可以通过使用径向渐变来完成。

div {
  width: 20vw;
  height: 20vw;
  background: radial-gradient(circle at top left,transparent 4vw, darkblue 4.1vw);
}

<div></div>

---

仅供娱乐，可以通过定义多个背景图像（每个角一个）来添加额外的倒角：

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>

- Danield

Answer 5

更新: 现在有很多可选方案。请查看其他答案之一。

原始答案:

不幸的是，目前没有基于官方或实现CSS规范的解决方案:(

然而，正如其他人所添加的那样，你可以使用JS库或复杂的HTML/CSS实现可能的解决方案（或作弊？）来实现相同的效果。我遇到了这个问题，正在寻找一种方法来制作比OP更复杂的角落而不使用图片。

我已经在webkit网站上提交了一个错误（功能请求）-因为似乎还没有提交过一个。

错误62458-功能请求：反向圆角

- Christopher Bull

Answer 6

对于纯色背景，你实际上可以使用伪元素和盒子阴影来绘制背景颜色，它不会隐藏父容器的背景，你实际上可以透过它们看到。

你需要的是一个理解:before/:after和box-shadow的浏览器:)

对于IE8，你可以画巨大的边框代替阴影。 http://codepen.io/anon/pen/fFgDo 盒子阴影方法： 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 */
}

---

---

伪元素可以采取任何形状，并通过CSS进行变换，可以在其元素的任意位置设置，以绘制类似于孔洞的效果。例如： http://codepen.io/gc-nomade/pen/nKAka

- G-Cyrillus

Answer 7

我制作了一个在线生成器，可以轻松获取任何你想要的组合代码：https://css-generators.com/custom-corners/ 以下是一些示例：

.one {
  --mask: radial-gradient(40px at 40px 40px,#0000 98%,#000) -40px -40px;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}
.two {
  --mask:
    radial-gradient(40px at 0 0,#0000 98%,#000) 0/51% 100% no-repeat,
    radial-gradient(40px at 100% 100%,#0000 98%,#000) 100%/51% 100% no-repeat;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}
.three {
  --mask:
    radial-gradient(60px at 60px 60px,#0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000) -60px -60px,
    linear-gradient(90deg,#000 20px,#0000 0) -10px 50% /100% calc(100% - 120px + 10px) repeat-x,
    linear-gradient(      #000 20px,#0000 0) 50% -10px/calc(100% - 120px + 10px) 100% repeat-y;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}
.four {
  --mask: radial-gradient(60px at 0 0,#0000 98%,#000);
  -webkit-mask: var(--mask);
          mask: var(--mask);
}
.five {
  --mask:
    radial-gradient(60px at 100% 0,#0000 calc(98% - 10px),#000 calc(100% - 10px) 98%,#0000),
    conic-gradient(from 90deg at 10px 10px,#0000 25%,#000 0) 0 0/calc(100% - 60px + 10px) 100% repeat-y,
    conic-gradient(at bottom 10px right 10px,#000 75%,#0000 0) 0 100%/100% calc(100% - 60px + 10px) repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);

}
.box {
  width: 150px;
  aspect-ratio:1;
  display:inline-block;
  background:linear-gradient(red,blue);
}

<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="box four"></div>
<div class="box five"></div>

- Temani Afif

---

太棒了，谢谢！但是根据 https://developer.mozilla.org/en-US/docs/Web/CSS/mask 的说法，这种技术几乎从浏览器诞生之初就得到了支持？请查看页面底部的浏览器兼容性表。 - Frank Conijn - Support Ukraine

Answer 8

有几种方法可以通过仅使用CSS来解决此问题 - 但这将取决于您的背景颜色（如果是纯色，则更容易），如果您的背景具有图案，则可能会稍微复杂一些。

我在这里介绍了一个基本示例，说明如何制作CSS中的反向边界半径（此处）。 这使用了一个关于边框大小的技巧来使用内部，您可能需要进行一些定位才能使其正常工作，但是正如您所看到的那样，这是可能的。特别是如果您为每个指定background-color。

如果您想要所有4个角落，您将不得不为您的div中的每个添加单独的类，并且每个类都将模拟一个角落，例如左上角，右上角等。

- Jon Mifsud

Answer 9

实际上有一种方法，像这样：

<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>

但正如@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>

- Juan Jimenez

Answer 10

不行。 如果你有扎实的基础，你可能可以使用CSS创建这个小三角。
否则，除了使用PNG，就没有什么特别的方法了，就像你在使用border-radius之前创建圆角一样。

- Kobi