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

现在，我们将创建伪元素并将其定位为圆的四分之一，透明，带有框阴影以模拟边框。

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

这就是结果：

DEMO ：jsFiddle

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;