在 CSS 中反转圆角？

Question

我有一个 css 代码：

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

我得到结果：

有没有可能这样给：

Answer 1

只需更新一下，看来您可以采用多种方式。

Lea Verou发布了解决方案

这是我使用边框图像的

使用边框图像

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

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

Answer 2

在现代浏览器中，您可以使用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/zh-CN/tutorials/masking/adobe/ ，其中介绍了如何使用mask-box-image获得类似的结果。

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> 

Answer 4

不幸的是，目前还没有基于官方或已实施的CSS规范的解决方案：(

但是，正如其他人所添加的那样，您可以使用JS库或复杂的HTML / CSS实现方案来达到相同的效果（或作弊？）。 我遇到了这个问题，同时寻找一种无需使用图像即可比OP制作更复杂的角的方法。

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

错误62458-功能请求：倒圆角

Answer 5

对于普通的背景颜色，您实际上可以使用伪元素和框阴影代替来绘制背景颜色， 并且它不会隐藏父容器的背景，实际上您会看到它们 。

您需要的是一种能够理解：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

Answer 6

这可以通过径向梯度来完成。

 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> 

Answer 7

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

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

如果要所有4个角，则必须为div中的每个span添加一个单独的类，并且每个类将模拟一个角，左上角，右上角等。

Answer 8

可以使用after元素来完成。 检查此jsfiddle链接 enter code here

Answer 9

不。如果您有扎实的背景 ，则可以使用css创建咬合。
否则，您将无法使用PNG进行任何特殊操作，就像您在border-radius之前创建圆角一样。

Answer 10

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

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

Answer 11

我制作了一个在线生成器，可以轻松获取您想要的任何组合的代码： 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>

Answer 12

不，那里没有。