使用 css3 反转边框半径

Question

自从 3 个小时以来，我一直在努力寻找如何反转边界半径，我在 css3 中专门为此看到了一个小代码，但我找不到它......

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

有想法吗？

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

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

.tab {
    position: relative;
}