灵感来自 this link和 this link ,我正在尝试通过两个要求制作纯 CSS 折叠效果:
- 完全透明的背景以显示
<IMAGE>
在它后面(!) - 能够使用
<DIV>
的完整高度其中的元素 (!)
我试过让我的工作正常,但右上角没有变得透明。如果我更换...
border-top: 60px solid red;
与
border-top: 60px solid transparent;
然后矩形框的背景通过它出现。有没有办法用纯 CSS 解决方案来解决这个问题?如果是如何?如果不是,那么接近 CSS 的替代方案是什么?代码/坐标应该是可读的、可解释的,并且不需要像 inkscape 这样的基于矢量的程序就可以很容易地被人类改变。
我卡住的DEMO:
https://jsfiddle.net/cg7hoyt3/
最佳答案
也许使用linear-gradient
代替纯色作为主 div 的背景。
border-width 和 gradient stop 的比率为 1/sqrt(2) = .7071
。
如果您使用 CSS 自定义属性或 CSS 预处理器,这将变得更加简单。
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>
关于html - 如何在图片上做纯CSS全高和真正透明的折叠效果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46321249/