我试图在纯css3中创建一个带过渡和盒子阴影的贴纸.
到目前为止,我已经完成了两面都有阴影的纸张,但我想让它看起来像这样：
没有图像,这甚至可能吗？
.shadow {
width: 150px;
height: 150px;
background-color: yellow;
position: relative;
}
.shadow:after {
position: absolute;
right: 10px;
left: auto;
-webkit-transform: skew(8deg) rotate(3deg);
-moz-transform: skew(8deg) rotate(3deg);
-ms-transform: skew(8deg) rotate(3deg);
-o-transform: skew(8deg) rotate(3deg);
transform: skew(8deg) rotate(3deg);
}
最佳答案
这是我的尝试,只是为了给你这个想法.
需要进行大量的艺术调整,但需要所有元素.
包括背面 – 可见性：隐藏;感谢Harry的建议
.test {
width: 300px;
height: 300px;
left: 50px;
top: 50px;
border-bottom-left-radius: 250px 45px;
position: absolute;
overflow: hidden;
transform: rotate(-19deg);
Box-shadow: -9px 10px 31px 6px gray;
backface-visibility: hidden;
}
.test:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-color: yellowgreen;
border-bottom-left-radius: 45px 250px;
background-image: radial-gradient(circle at 50px 180px,rgba(255,255,0.3),transparent 70px),radial-gradient(circle at 85px 215px,0.4),radial-gradient(circle at 120px 250px,transparent 70px);
Box-shadow: -9px 10px 14px 22px gray;
}
