html - 如何创建此 CSS3 页面 curl 效果？

Question

我正在尝试使用 CSS3 创建页面 curl 效果。那种效果应该是类似这样的——

我试图让它工作，但无法弄清楚。

这是我的代码

.nav {
    width: 200px;
    background: #353942;
    height: 50px;
    position: relative;

}
.curl {
    width:70px;
    height:50px;
    position: absolute;
    top:0;
    right:0;
    background: linear-gradient(
      25deg, 
      #4c4c4c 0%,
      #474747 39%,
      #2c2c2c 50%,
      #000000 51%,
      #111111 60%,
      #2b2b2b 76%,
      #1c1c1c 91%,
      #131313 100%);
    box-shadow : 0 0 10px rgba(0,0,0,0.5);
    transition: all .5s ease;
}
.curl:before,
.curl:after {
    content: '';
    position: absolute;
    z-index: -1;
    left: 12.5%;
    bottom: 5.8%;
    width: 70%;
    max-width: 300px;
    max-height: 100px;
    height: 55%;
    box-shadow: 0 12px 15px rgba(0, 0, 0, 0.3);
    transform: skew(-10deg) rotate(-6deg);
}
.curl:after {
    left: auto;
    right: 5.8%;
    bottom: auto;
    top: 14.16%;
    transform: skew(-25deg) rotate(-84deg);
}

.curl:hover {
    width: 120px;
    height: 50px;
}
.curl:hover:before,
.curl:hover:after {
    box-shadow: 0 24px 30px rgba(0, 0, 0, 0.3);
}

这是 JS BIN

谁能告诉我我是如何解决这个问题的？

任何想法将不胜感激。

谢谢。

Answer 1

检查一下。

.nav {
width: 200px;
background: #353942;
height: 50px;
position: relative;

}
 .curl {
width:120px;
height:120px;
position: absolute;
top:0;
left:0;
background : 
    linear-gradient(
        135deg, 
        #fff, 
        #f3f3f3 45%, 
        #ddd 50%, 
        #aaa 50%, 
        #bbb 56%, 
        #ccc 62%, 
        #f3f3f3 80%,
        #fff 100%
    );
box-shadow : 0 0 10px rgba(0, 0, 0, .5);
transition: all .5s ease;
}
.curl:before,
.curl:after {
content: '';
position: absolute;
z-index: -1;
left: 12.5%;
bottom: 5.8%;
width: 70%;
max-width: 300px;
max-height: 100px;
height: 55%;
box-shadow: 0 12px 15px rgba(0, 0, 0, .3);
transform: skew(-10deg) rotate(-6deg);
}
.curl:after {
left: auto;
right: 5.8%;
bottom: auto;
top: 14.16%;
transform: skew(-15deg) rotate(-84deg);
}

.curl:hover {
width: 240px;
height: 240px;
}
.curl:hover:before,
.curl:hover:after {
box-shadow: 0 24px 30px rgba(0, 0, 0, .3);
}