如何在图像上制作纯CSS全高和真正透明的折叠效果？

Sam 发表于 Dev

山姆

受此链接和此链接的启发，我正在尝试使纯CSS折叠效果具有两个要求：

完全透明的背景以显示其<IMAGE>背后（！）
能够使用其中<DIV>元素的全高（！）

我试过让我的作品正常工作，但右上角却不透明。如果我更换...

border-top: 60px solid red;

与

border-top: 60px solid transparent;

然后矩形框的背景就会通过它出现。有没有办法用纯CSS解决方案解决这个问题？如果是，怎么办？如果没有，那么有什么替代CSS的方法呢？代码/协调应该是人类可读，可解释且易于更改的，而无需基于矢量的程序（例如inkscape）。

我被困的DEMO：https :
//jsfiddle.net/cg7hoyt3/

保利

也许使用linear-gradient而不是纯色作为主要div的背景。

边界宽度和渐变色标的比率为1 / sqrt(2) = .7071。

如果您使用的是CSS自定义属性或CSS预处理程序，这将变得更加简单。

Codepen变量使用演示

body {
  background-image: url("http://hdbackgroundspic.com/wp-content/uploads/2017/09/drop-of-water-background.jpg");
}

div {
  width: 230px;
  height: 230px;
  margin: 50px auto;
  background: linear-gradient(-135deg, transparent, transparent 45px, gold 45px, gold);
  position: relative;
}

div::after {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  height: 0px;
  width: 0px;
  z-index: 2;
  border-width: 30px; /* note .7071 of gradient-stop */
  border-style: solid;
  border-color: transparent transparent yellow yellow;
  filter: drop-shadow(-2px 6px 6px rgba(0, 0, 0, .5));
}