如何使用之前/之后元素对背景颜色进行切片

Question

请看我的例子我添加了背景颜色，现在我想切片一些点，并且必须像我添加的那样具有背景透明

.single_cat_list_in .meta:before {
content: "";
width: 20px;
height: 20px;
background: #ffffff !important;
position: absolute;
right: -35px;
bottom: -10px;
border-radius: 50%;
border-left: 1px solid rgba(0, 0, 0, 0.5);
}

https://prnt.sc/pi94k5

Answer 1

您可以使用多个线性和径向渐变来创建圆角(摘自本文(：

.item {
height: 100px;
	background:
		linear-gradient(45deg, transparent 10px, gold 0) top left,
		linear-gradient(315deg, transparent 10px, gold 0) top right,
		linear-gradient(225deg, transparent 10px, white 0) bottom right,
		linear-gradient(135deg,  transparent 10px, white 0) bottom left;
	background-image:
		radial-gradient(circle at 0 100%, transparent 14px, gold 15px),
		radial-gradient(circle at 100% 100%, transparent 14px, gold 15px),
radial-gradient(circle at 100% 0, transparent 14px, white 15px),
		radial-gradient(circle at 0 0, transparent 14px, white 15px);
	background-size: 50% 50%;
	background-repeat: no-repeat;
}
body {
background: silver;
}

<div class="item"></div>