在CSS中反转圆角？

Question

我有一个CSS代码：

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

我得到结果：

有没有可能给这样的：

原文由 Mubeen 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我制作了一个在线生成器，可以轻松获取您想要的任何组合的代码： 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 发布，翻译遵循 CC BY-SA 4.0 许可协议