css - 在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/en/tutorials/masking/adobe/，其中描述了如何使用mask-box-image.

Answer 3

您还可以使用和内联 svg与路径元素：

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 ，您可以绘制 Hudge 边框而不是阴影。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 (here) 中制作反向边框半径。这使用了边框大小的技巧来使用内部，您可能需要进行一些定位才能使其正常工作，但是您可以看到它是可能的。特别是如果您background-color为每个span.

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

Answer 8

不。如果你有扎实的背景，你可能可以使用 css 来创建咬合。
否则，除了使用 PNG 之外，您无法做任何特别的事情，就像您之前创建圆角一样border-radius。

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>

Answer 10

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

Answer 11

不，那里没有。