对边边界半径

Question

我不知道这是否存在，但我正在为自己制作一个小型 Web 生成器，我在其中添加新的 HTML 元素，为其提供我想要的属性及其值。在我通过 Javascript 进行了一些 CSS 更改之后，对于 border-radius 我使用了这个：

function borderRadius(){
    var dr = document.getElementById("displayColor");
    var rv = document.getElementById("radiusValue");
    var tl = document.getElementById("tl").value;
    var tr = document.getElementById("tr").value;
    var bl = document.getElementById("bl").value;
    var br = document.getElementById("br").value;
    rv.innerHTML = 'Top-Left: '+tl+'%; Top-Right: '+tr+'%; Bottom-Left: '+bl+'%; Bottom-Right: '+br+'%;';
    dr.style.borderTopLeftRadius = tl+'%';
    dr.style.borderTopRightRadius = tr+'%';
    dr.style.borderBottomLeftRadius = bl+'%';
    dr.style.borderBottomRightRadius = br+'%';  
}

这段代码并不重要，它看起来像 ..

现在我的问题是我可以通过 CSS 做一些像

没有在周围做额外的元素？

更新：

正如 GabyakaG.Petrioli 评论的那样，这可能是一个解决方案，我已经完成了一半：

.round {
    background:
        radial-gradient(circle at 0 50%, rgba(204,0,0,0) 40%, #c00 10%),
        radial-gradient(circle at 100% 50%, rgba(204,0,0,0) 40%, #c00 10%),
        radial-gradient(circle at 100%, rgba(204,0,0,0) 40%, #c00 10%),
        radial-gradient(circle at 0, rgba(204,0,0,0) 40%, #c00 10%);

    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 100%;
    background-repeat: no-repeat;
    
    padding: 10%;
    padding-left: 22%;
    padding-right: 22%;
}

<div class="round">By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case, don't put the color stops at the exact same position, since the result will be too aliased in most browsers (and kinda still is in Webkit).</div>

我也在这里找到了答案和解决方案，但我仍然有一些利润或其他东西：

*{margin: 0; outline:0; border: 0;}
.round {
    background:
        radial-gradient(circle at 0 100%, rgba(204,0,0,0) 70%, #c00 71%),
        radial-gradient(circle at 100% 100%, rgba(204,0,0,0) 70%, #c00 71%),
        radial-gradient(circle at 100% 0, rgba(204,0,0,0) 70%, #c00 71%),
        radial-gradient(circle at 0 0, rgba(204,0,0,0) 70%, #c00 71%);

    background-position: bottom left, bottom right, top right, top left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
   width: 300px;
   height: 300px;
    padding: 10%;
    transform: rotate(45deg);
}
p{
  transform: rotate(-45deg);
  width: 100px;
  margin: 100px;
}

<div class="round"><p>

By using radial gradients, you can simulate rounded corners with a negative radius. Just in this case,</p></div>

Answer 1

否，目前 CSS 中没有插入或反转 border-radius。但是有很多方法可以创建这种形状。我已经但认为这是一个足够好的 shapes 问题可以独立存在，因此在这里给出详细的答案创建此形状的所有不同可能方法。

使用径向渐变：

只是为了其他人的利益而在这里添加。这是一次重复，但使答案完整。我们可以使用 radial-gradient 背景图像 创建的四个椭圆（或圆）并将它们放在适当的位置以创建此效果。 输出形状是响应式的，但当形状应该具有 :hover 限制在形状边界或有任何其他效果时不能使用而不是像 fill/background 这样的纯色。它还需要一个方形容器（不是矩形）。

div {
  width: 300px;
  height: 300px;
}
.radial-grad {
  background: radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 70%, #c00 71%);
  background-position: bottom left, bottom right, top right, top left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  transform: rotate(45deg);
  backface-visibility: hidden;
}

/* just for demo */

div {
  transition: all 1s ease;
}
div:hover {
  width: 350px;
  height: 350px;
}

<div class='radial-grad'></div>

使用 SVG：

SVG 是推荐的工具，用于创建如此复杂的形状。我们可以使用 path 元素及其各种命令轻松创建所需的形状。 SVG 是可扩展的（响应式），非常容易创建和维护，允许更好地控制形状，如斜率等。它也可以支持渐变或图像背景。与 radial-gradient 不同，此 也适用于矩形容器 。

通过修改二次曲线的控制点（Q命令后提供的第一个坐标），我们可以控制cut-off区域的slope/curve。 path 元素的 d 属性可以通过 JS 设置或修改，就像我们对任何其他 HTML 属性所做的那样。

但是我们要记住，SVG是一种图形（图像）。我们无法单独控制您通过纯 SVG 添加到页面的 HTML 元素。那将需要 clip-paths 或类似的东西。

svg {
  height: 300px;
  width: 300px;
}

/* just for demo */

svg {
  transition: all 1s;
}
svg:hover {
  height: 200px;
  width: 250px;
}

<svg viewBox='0 0 200 200'>
  <defs>
    <pattern id='bg' width='200' height='200' patternUnits='userSpaceOnUse'>
      <image xlink:href='https://placeimg.com/200/200/nature' height='200' width='200' />
    </pattern>
  </defs>
  <path d='M0,0 Q100,60 200,0 Q140,100 200,200 Q100,140 0,200 Q60,100 0,0z' fill='url(#bg)'/>
</svg>

使用Clip-path:

这类似于纯 SVG 版本，但与创建形状然后放置在容器后面或内部的版本不同，这里我们将容器元素本身切割成所需形状。

纯 CSS 方法（无 SVG）可用，但 尚不支持复杂路径。它 仅支持基本形状 因此我们必须 使用 clip-path 和 SVG定义。此外，Firefox 仅在与 SVG 一起使用时才支持它（如 url(#id)）。 IE 仍然不支持 clip-path 这就是为什么这对生产实施还不好的原因之一。

当形状的背景为图像或渐变而不是纯色时，这很好，当需要 :hover 效果时，它也可以很好地工作，因为我们是切割出所需的路径。

这更像是一个插图border-radius，因为该元素不存在于裁剪区域之外。

div {
  height: 300px;
  width: 300px;
  background-image: url(https://placeimg.com/200/200/nature);
}
.clip-path {
  -webkit-clip-path: url(#clipper);
  clip-path: url(#clipper);
}

/* just for demo */

div {
  transition: all 1s ease;
}
div:hover {
  height: 350px;
  width: 325px;
}

<svg width='0' height='0'>
  <defs>
    <clipPath id='clipper' clipPathUnits='objectBoundingBox'>
      <path d='M0,0 Q0.5,0.3 1,0 Q0.7,0.5 1,1 Q0.5,0.7 0,1 Q0.3,0.5 0,0z' />
    </clipPath>
  </defs>
</svg>
<div class='clip-path'></div>

使用掩码：

此功能目前仅受 WebKit 支持的浏览器支持，因此现在不推荐使用，但它非常 未来的好选择。当形状的 背景是图像或渐变 而不仅仅是纯色时，此方法特别有用。

掩码的工作与radial-gradient方法非常相似，但不同之处在于不像radial-gradient 用纯色填充剩余的 space，这只会掩盖不需要的部分，不会添加任何自己的填充。所以，原来分配给元素的背景图片将被保留。

如果我们希望具有仅限于形状边界的:hover效果，则此方法不好因为它不会切掉不需要的部分，它只是屏蔽它们或使其透明。

与 radial-gradient 方法类似，这也 需要一个方形容器 才能工作，但它在其他方面是响应式的。

div { height: 300px; width: 300px; background-image: url(https://placeimg.com/200/200/nature); } .mask { -webkit-mask-image: radial-gradient(circle at 0 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 100%, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 100% 0, rgba(204, 0, 0, 0) 70%, #c00 71%), radial-gradient(circle at 0 0, rgba(204, 0, 0, 0) 70%, #c00 71%); -webkit-mask-position: bottom left, bottom right, top right, top left; -webkit-mask-size: 50% 50%; -webkit-mask-repeat: no-repeat; transform: rotate(45deg); backface-visibility: hidden; } /* just for demo */ div { transition: all 1s ease; } div:hover { height: 350px; width: 350px; }

<div class='mask'></div>

使用伪元素和框阴影:

我不推荐这种方法，因为它有很多缺点，但仍然是一种选择。如果我们只需要创建形状，不需要 :hover 效果，不需要切掉的区域是透明的（即 cut-off 区域可以是纯色，如这段代码中的白色）那么我们可以尝试这种方法。

它涉及将 2 个椭圆 pseudo-elements 放在顶部左侧，然后让它们的阴影来完成工作在他们的对面。

div { position: relative; height: 300px; width: 300px; background: #c00; } div:before { position: absolute; content: ''; height: 50%; width: 110%; top: -35%; left: -5%; background: white; border-radius: 50%; box-shadow: 0px 360px 0px 0px white; } div:after { position: absolute; content: ''; width: 50%; height: 110%; left: -35%; top: -5%; background: white; border-radius: 50%; box-shadow: 360px 0px 0px 0px white; }

<div></div>

对边边界半径

Opposite side border radius

javascript

css

css-shapes