html - CSS 三 Angular 形很好 Css 模糊很好，现在我如何将两者结合在一起？

Question

我的问题是模糊适用于 div 的整个正方形而不是三 Angular 形。

如果这可以通过 svg 来完成，我很感兴趣。

html {
  background-image: url("https://www.terra.bzh/sites/terra/files/styles/normal_size/public/beverages-3105631_1920_2.jpg.webp?itok=Rf5o2Hr0");
  background-size: cover;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 0 0 50px;
  border-color: transparent transparent transparent #FF000060;
  backdrop-filter: blur(0.2rem);
}

<div class="triangle"></div>

Answer 1

改用clip-path。

html {
  background-image: url("https://www.terra.bzh/sites/terra/files/styles/normal_size/public/beverages-3105631_1920_2.jpg.webp?itok=Rf5o2Hr0");
  background-size: cover;
}

.triangle {
  width: 100px;
  height: 100px;
  background: #FF000060;
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
  clip-path: polygon(0 0, 0% 100%, 100% 100%);
  backdrop-filter: blur(0.2rem);
}

<div class="triangle"></div>

另一个带有mask的想法

html {
  background-image: url("https://www.terra.bzh/sites/terra/files/styles/normal_size/public/beverages-3105631_1920_2.jpg.webp?itok=Rf5o2Hr0");
  background-size: cover;
}

.triangle {
  width: 100px;
  height: 100px;
  background: #FF000060;
  -webkit-mask: linear-gradient(to top right, #000 50%, transparent 50%);
  backdrop-filter: blur(0.2rem);
}

<div class="triangle"></div>