CSS：具有负半径的边框[重复]答案

【问题标题】：CSS: borders with negative radius [duplicate]CSS：具有负半径的边框[重复]
【发布时间】：2015-03-23 09:10:31
【问题描述】：

我第一次遇到一个关于边界的问题。

所以，我需要在没有任何图像的情况下创建类似的边框（如果可能的话）：

页面底部同理

如您所见，有两个带负 (?) 边界半径的边界。我知道否定的border-radius 不起作用，所以如果有人可以帮助我解决问题，我将不胜感激。

我已经尝试过这个：The first example，但问题是我无法创建正常边框 - 仅限整个块。

【问题讨论】：

标签： html css

【解决方案1】：

有一个 div 元素作为包装器，并添加带有 div 的元素作为圆角。您可以尝试在子元素上添加带有边框半径的角：

此处示例：http://jsfiddle.net/5YS68/

div {
    width: 100px;
    height: 100px;
    overflow: hidden;
    z-index: 1;
    position: relative;
}

p {
    margin: 0;
    width: 98px;
    height: 98px;
    border: 1px solid red;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
}
b.top-right {
    position: absolute;
    z-index: 3;
    background: white;
    top: -5px;
    right: -5px;
    width: 10px;
    height: 10px;
    border: 1px solid red;
    border-radius: 999px;
}

b.top-left {
    position: absolute;
    z-index: 3;
    background: white;
    top: -5px;
    left: -5px;
    width: 10px;
    height: 10px;
    border: 1px solid red;
    border-radius: 999px;
}

您还可以使用:before 和:after 伪元素来获得更简洁的html。顶角使用一个元素（前后伪元素定位绝对），底角使用一个元素

【讨论】：

【解决方案2】：

你可以查看这个 jQuery 插件：http://jquery.malsup.com/corner/ 它还有很多其他的边框样式的可能性。

您还可以查看 Lea Verou 提供的解决方案。她使用带有 css3 渐变的负边界半径：http://lea.verou.me/2011/03/beveled-corners-negative-border-radius-with-css3-gradients/

【讨论】：

在回答之前，请确定是否已经提出过相同或相似的问题。
我现在看到你的网址了，有这个书签忘记先在堆栈上搜索，对不起。
然后您可以删除此答案并要求提问者前往该主题的评论。