如何在图片上做纯CSS全高真正透明的折叠效果？

Question

受到this link and 的启发，我正在尝试制作纯粹的CSS折叠效果，有两个要求：

完全透明的背景以显示其背后的 <IMAGE> (!)
能够使用其中 <DIV> 元素的完整高度 (!)

我试过让我的工作正常，但右上角没有变透明。如果我更换...

border-top: 60px solid red;

和

border-top: 60px solid transparent;

然后矩形框的背景通过它出现。有没有办法用纯 CSS 解决方案来解决这个问题？如果是如何？如果不是，那么接近 CSS 的替代方案是什么？ code/coordinations 应该是可读的、可解释的，并且不需要像 inkscape 这样的基于矢量的程序就可以很容易地改变。

卡住的DEMO：
https://jsfiddle.net/cg7hoyt3/

Answer 1

正如评论中所建议的，这可以使用剪贴蒙版来完成：

clip-path: polygon(0 0, 210px 0, 100% 60px, 100% 100%, 0 100%);

虽然这看起来相当令人生畏，但实际上非常容易阅读：只需从左上角开始逐一阅读要点。这些点围绕 visible.

绘制一个多边形

请注意，剪辑蒙版仅适用于现代浏览器（不包括 IE + Edge）。有关最新的开发状态，请参阅 Can I use for up-to-date browser support and Mozilla Plotform Status。

代码如下：

body {background-image: url("http://hdbackgroundspic.com/wp-content/uploads/2017/09/drop-of-water-background.jpg")}
.page {
  width: 230px;
  height: 230px;
  margin: 50px auto;
  background: gold;
  padding: 20px;
}
.fold {
  position: relative;
  -webkit-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
  -moz-box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
  box-shadow: -5px 7px 5px rgba(0,0,0,0.8);
  -webkit-clip-path: polygon(0 0, 210px 0, 100% 60px, 100% 100%, 0 100%);
  clip-path: polygon(0 0, 210px 0, 100% 60px, 100% 100%, 0 100%);
}
.fold:before, .fold:after {
  content: "";
  position: absolute;
  top: 0%;
  right: 0%;
  width: 0px;
  height: 0px;
}
.fold:before {
  border-bottom: 60px solid #BBB;
  border-right: 60px solid transparent;
  -webkit-box-shadow: -5px 5px 5px 5px rgba(0,0,0,0.1);
  -moz-box-shadow: -5px 5px 5px 5px rgba(0,0,0,0.1);
  box-shadow: -5px 5px 5px 5px rgba(0,0,0,0.1);
}
.fold:after {
  border-top: 60px solid transparent;
  border-left: 60px solid yellow;
}

<div class="page fold">
  <h2>Dear Bettie</h2>
  Will you please erase that darn red corner from this folded note love?<br><br>
  Thanks xxx<br>Sandra
</div>

Answer 2

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

border-width 和 gradient stop 的比例为 1 / sqrt(2) = .7071。

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

Codepen Demo of variable use

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));
}

<div></div>

如何在图片上做纯CSS全高真正透明的折叠效果？

How to make a pure CSS full height and truly transparent folding effect over an image?

html

css

layout

transparency

transparent