javascript - 将 CSS `backdrop-filter` 应用于多边形形状

Question

根据下面的两张图片，我尝试创建一个底部带有静态大小的三 Angular 形的“工具提示”。但是，我想将 backdrop-filter: Blur(10px); 应用于整个形状。目前模糊滤镜仅适用于矩形，不适用于三 Angular 形。

body {
  background: black;
}

.Tooltip {
  position: absolute;
  height: 300px;
  width: 200px;
  backdrop-filter: blur(10px);
  background: rgba(85, 85, 85, 0.3);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.85);
  overflow: visible;
}

.Tooltip::before {
  background: rgba(85, 85, 85, 0.3);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  content: '';
  display: block;
  height: 20px;
  left: 50%;
  position: absolute;
  top: 100%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 20px;
}

.RedBar {
  position: absolute;
  top: 250px;
  left: 110px;
  height: 100px;
  width: 30px;
  background: red;
}

<div class="RedBar"></div>
<div class="Tooltip"></div>

形状:

问题:

Answer 1

解决这个问题的唯一方法(因为我猜使用伪元素时还不支持 backdrop-filter 属性)是使工具提示背景成为 clip-path，所以它是工具提示的形状。请参阅下面的代码片段并检查全屏示例。

旁注:您的 CSS 由于 rgba() 声明不正确而失败。您无法为其添加十六进制颜色。 F.e. rgba(#555555, 0.3); 是错误的，应该是 rgba(85, 85, 85, 0.3)，因为它是你需要写下的 rgb 代码。

body {
  background: black;
  min-height: 500px;
}

.Tooltip {
  position: fixed;
  height: 400px;
  width: 200px;
  backdrop-filter: blur(10px);
  background: rgba(85, 85, 85, 0.3);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.85);
  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 58% 76%, 49% 83%, 40% 75%, 0% 75%);
  overflow: visible;
  color: #fff;
}

.RedBar {
  position: fixed;
  top: 250px;
  left: 110px;
  height: 100px;
  width: 30px;
  background: red;
}

<div class="RedBar"></div>
<div class="Tooltip">lentesque efficitur interdum elit, vel euismod lorem rutrum non. Etiam congue tortor rhoncus velit pharetra, nec ornare lacus hendrerit. Phasellus malesuada tellus at enim porttitor commodo. Curabitur commodo lacus erat, sit amet pretium sapien rutrum in. Cras vitae tortor nunc. Praesent elementum, massa at rhoncus ultrices, ligula dui finibus risus, sed sollicitudin orci neque sit amet libero. Ut volutpat urna id</div>

编辑
另一个结果是添加一个额外的 div 来模仿工具提示内的三 Angular 形。仍然不是理想的解决方案。

body {
  background: black;
  min-height: 500px;
}

.tooltip-wrapper {
  position: fixed;
  position: relative;
}

.tooltip {
  height: auto;
  width: auto;
  backdrop-filter: blur(10px);
  background: rgba(85, 85, 85, 0.3);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.85);
  overflow: visible;
  color: #fff;
  margin-bottom: 20px;
}

.tooltip-arrow {
  backdrop-filter: blur(10px);
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  background: rgba(85, 85, 85, 0.3);
  width: 20px;
  height: 15px;
  position: absolute;
  top: 100%;
  left: 50%;
}

.RedBar {
  position: fixed;
  top: 100px;
  left: 210px;
  height: 200px;
  width: 300px;
  background: red;
}

<div class="RedBar"></div>
<div class="tooltip-wrapper">
  <div class="tooltip">lentesque efficitur interdum elit, vel euismod lorem rutrum non. Etiam congue tortor rhoncus velit pharetra, nec ornare lacus hendrerit. Phasellus malesuada tellus at enim porttitor commodo. Curabitur commodo lacus erat, sit amet pretium sapien rutrum
    Phasellus malesuada tellus at enim porttitor commodo. Curabitur commodo lacus erat, sit amet pretium sapien rutrum in. Cras vitae tortor nunc. Praesent elementum, massa at rhoncus ultrices, ligula dui finibus risus, sed sollicitudin orci neque sit
    amet libero. Ut volutpat urna id</div>
  <div class="tooltip-arrow"></div>
</div>