使用CSS3实现反向圆角边框

Question

我已经花费了三个小时尝试寻找如何反转边框半径，我在CSS3中看到了一个专门用于此目的的小代码，但我找不到它...

你必须知道我正在使用WordPress（不幸的是）

有什么想法吗？

- Emilien

---

这个有帮助吗？https://dev59.com/kGEh5IYBdhLWcg3wbi8W - Asons

我已经看过这篇帖子，但没有帮助到我，因为此问题使用了许多<div>，而我正在使用WordPress，所以直接将一些<div>放在代码中不是一个好主意.. 有了css3，我们可以用一行代码解决这个问题，但我忘记怎么做了^^ - Emilien

今天还没有这样的CSS3属性。 - Asons

那么如果您不介意的话，我将投票将其关闭为重复项？ - Asons

好的，但是否存在更简单的方法？使用CSS3。 - Emilien

只需按照重复链接，您会发现有多种方法可供选择，其中一些方法无需添加大量的<div>标签。 - Asons

Answer 1

如果你的选项卡有一个纯色背景，你可以使用伪元素来实现这个效果。

---

首先，我们创建一个带有左上角和右上角边框半径的选项卡。

.tab {
    -webkit-border-top-left-radius: 10px;
    -webkit-border-top-right-radius: 10px;
    -moz-border-radius-topleft: 10px;
    -moz-border-radius-topright: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

然后我们添加 position: relative，因为我们需要在伪元素中使用 position:absolute。

.tab {
    position: relative;
}

现在，我们要创建并定位伪元素作为一个四分之一的圆形，透明的，并使用 box-shadow 模拟边框。

.tab:before,
.tab:after {
    content: "";
    position: absolute;

    height: 10px;
    width: 20px;

    bottom: 0;
}

.tab:after {
    right: -20px;

    border-radius: 0 0 0 10px;
    -moz-border-radius: 0 0 0 10px;
    -webkit-border-radius: 0 0 0 10px;

    -webkit-box-shadow: -10px 0 0 0 #fff;
    box-shadow: -10px 0 0 0 #fff;
}

.tab:before {
    left: -20px;

    border-radius: 0 0 10px 0;
    -moz-border-radius: 0 0 10px 0;
    -webkit-border-radius: 0 0 10px 0;

    -webkit-box-shadow: 10px 0 0 0 #fff;
    box-shadow: 10px 0 0 0 #fff;
}

这是结果：

演示：jsFiddle

body {
 background: #1c1c1c;
 padding: 50px;
}

.tab {
 float: left;

 width: 90px;
 padding: 10px 15px;
 height: 30px;

 position: relative;

 background: #fff;

 -webkit-border-top-left-radius: 10px;
 -webkit-border-top-right-radius: 10px;
 -moz-border-radius-topleft: 10px;
 -moz-border-radius-topright: 10px;
 border-top-left-radius: 10px;
 border-top-right-radius: 10px;
}

.tab:before,
.tab:after {
 content: "";
 position: absolute;

 height: 10px;
 width: 20px;

 bottom: 0;
}

.tab:after {
 right: -20px;

 border-radius: 0 0 0 10px;
 -moz-border-radius: 0 0 0 10px;
 -webkit-border-radius: 0 0 0 10px;

 -webkit-box-shadow: -10px 0 0 0 #fff;
 box-shadow: -10px 0 0 0 #fff;
}

.tab:before {
 left: -20px;

 border-radius: 0 0 10px 0;
 -moz-border-radius: 0 0 10px 0;
 -webkit-border-radius: 0 0 10px 0;

 -webkit-box-shadow: 10px 0 0 0 #fff;
 box-shadow: 10px 0 0 0 #fff;
}

<div class="tab"></div>

- agustin

---

在WordPress中添加一些代码并不是很简单^^但我会尝试类似这样的东西！如果我找到解决方案，我会编辑我的第一篇帖子:) - Emilien

我无法添加<div>以添加类，因此我必须向我的元素添加边框，当我应用jQuery插件时，border-radius会忽略边框！ - Emilien