clip-path 和 polygon
clip-path 是一个 CSS 属性，用于创建一个裁剪区域，只有这个区域内的部分会显示出来。polygon 是 clip-path 的一个函数，用于创建多边形的裁剪区域。polygon 函数接受一系列的点，这些点定义了多边形的每个角的坐标。
clip-path: polygon(x1 y1, x2 y2, …, xn yn);
这些坐标的取值范围是 0% 到 100%，相对于元素的宽度和高度。例如：
0% 0% 表示左上角
100% 0% 表示右上角
100% 100% 表示右下角
0% 100% 表示左下角
创建带凹槽的形状
要创建带凹槽的长方形，我们需要定义左边的三个凹槽的位置和大小。假设每个凹槽的高度为 15%，宽度为 15%。
以下是解释每个点坐标如何形成三个凹槽：
0% 0%：起点在左上角。
100% 0%：到右上角。
100% 100%：到右下角。
0% 100%：回到左下角。
0% 85%：第一个凹槽的开始。
15% 85%：第一个凹槽的底部。
15% 70%：第一个凹槽的顶点。
0% 70%：第一个凹槽的结束。
0% 55%：第二个凹槽的开始。
15% 55%：第二个凹槽的底部。
15% 40%：第二个凹槽的顶点。
0% 40%：第二个凹槽的结束。
0% 25%：第三个凹槽的开始。
15% 25%：第三个凹槽的底部。
15% 10%：第三个凹槽的顶点。
0% 10%：第三个凹槽的结束。
filter: drop-shadow
filter: drop-shadow 是一个 CSS 属性，用于应用阴影效果，它与 box-shadow 的区别在于，drop-shadow 会跟随元素的形状，包括非矩形的形状。
语法：
filter: drop-shadow(offset-x offset-y blur-radius color);
offset-x 和 offset-y：阴影的水平和垂直偏移量。
blur-radius：阴影的模糊半径。
color：阴影的颜色。
例如：
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
这个例子会在元素周围创建一个 10 像素模糊的黑色阴影。
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Shape with Shadow</title>
<style>
.custom-shape {
width: 120px;
height: 300px;
position: relative;
margin: 50px;
background-color: transparent;
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 85%, 15% 85%, 15% 70%, 0% 70%,
0% 55%, 15% 55%, 15% 40%, 0% 40%, 0% 25%, 15% 25%, 15% 10%, 0% 10%);
border: 2px solid rgb(0, 94, 255);
filter: drop-shadow(0 0 7px rgba(0, 94, 255, 0.9));
}
.square-1 {
position: absolute;
left: 38px;
top: 79px;
width: 20px;
height: 44px;
border: 2px solid rgb(0, 94, 255);
border-right: none;
filter: drop-shadow(0 0 7px rgba(0, 94, 255, 0.9));
}
.square-2 {
position: absolute;
left: 38px;
top: 170px;
width: 20px;
height: 44px;
border: 2px solid rgb(0, 94, 255);
border-right: none;
filter: drop-shadow(0 0 7px rgba(0, 94, 255, 0.9));
}
.square-3 {
position: absolute;
left: 38px;
top: 261px;
width: 20px;
height: 44px;
border: 2px solid rgb(0, 94, 255);
border-right: none;
filter: drop-shadow(0 0 7px rgba(0, 94, 255, 0.9));
}
</style>
</head>
<body>
<div class="custom-shape"></div>
<div class="square-1"></div>
<div class="square-2"></div>
<div class="square-3"></div>
</body>
</html>
