使用css3反转边界半径[重复]答案

【问题标题】：Reverse border radius with css3 [duplicate]使用css3反转边界半径[重复]
【发布时间】：2016-09-26 00:27:22
【问题描述】：

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

你一定知道我正在使用 wordpress（很遗憾）

有想法吗？

【问题讨论】：

这会有帮助吗？ stackoverflow.com/questions/22421880/…
我已经看过这篇文章，这对我没有帮助，因为问题使用了很多
，但我在 Wordpress 上，所以直接在代码中添加一些
不是一个好主意..使用css3我们可以在一行代码中做到这一点，但我忘记了如何^^
嗯，到今天为止还没有这样的 CSS3 属性
如果您不介意，我将投票决定将其作为副本关闭？
好的，但是否存在更简单的东西？使用 CSS3

【解决方案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;
}

&lt;div class="tab"&gt;&lt;/div&gt;

【讨论】：

在wordpress中添加一些代码不是很简单^^但是我会尝试这样的！如果我找到解决方案，我会编辑我的第一篇文章:)
我不能添加
来添加一个类，所以我必须给我的元素加上一个边框，当我应用一个 jQuery 插件时，边框会被边框半径忽略!