画一个凹槽并附着阴影，使用clip-path：polygon和 filter: drop-shadow属性

最新推荐文章于 2024-08-22 09:38:29 发布

-Toupi.

最新推荐文章于 2024-08-22 09:38:29 发布

阅读量279

点赞数 6

文章标签： css3 css

本文链接：https://blog.csdn.net/weixin_44098452/article/details/140847850

版权

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>