html - 使用 CSS3 创建纸张 curl

Question

HTML代码:

<div class="box">Paper Curl</div>

CSS3代码:

.box
{
    position: relative;
    width: 500px;
    padding: 50px;
    margin: 0 auto 20px auto;
    background: #f0ab67;
}

.box:before, .box:after
{
    position: absolute;
    width: 40%;
    height: 10px;
    content: ' ';
    left: 12px;
    bottom: 12px;
    background: transparent;
    -webkit-transform: skew(-5deg) rotate(-5deg);
    -moz-transform: skew(-5deg) rotate(-5deg);
    -ms-transform: skew(-5deg) rotate(-5deg);
    -o-transform: skew(-5deg) rotate(-5deg);
    transform: skew(-5deg) rotate(-5deg);
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.8);
    z-index: -1;
}

.box:after
{
    left: auto;
    right: 12px;
    -webkit-transform: skew(5deg) rotate(5deg);
    -moz-transform: skew(5deg) rotate(5deg);
    -ms-transform: skew(5deg) rotate(5deg);
    -o-transform: skew(5deg) rotate(5deg);
    transform: skew(5deg) rotate(5deg);
}

下面是我想要实现的“纸张 curl ”:

http://postimg.org/image/v0l84bmdv/

下面是我到目前为止可以做出的曲线:

http://codepen.io/anon/pen/BCLpE

任何人都可以帮助我如何获得像图像中那样完美的曲线吗？我不确定是使用图像还是我们可以使用 CSS3 本身。

Answer 1

您的演示表明您的方向是正确的。您只需要通过反复试验对其进行一些调整。这是编辑后的代码:

.box {
    position: relative;
    width: 500px;
    padding: 50px;
    margin: 0 auto 20px auto;
    background: white;/* #f0ab67;*/
    border:1px solid lightgray;
}

.box:before, .box:after {
    position: absolute;
    width: 48%;
    height: 10px;
    content: ' ';
    left: 20px;
    bottom: 40px;      
    -webkit-transform-origin: top right;
    -moz-transform-origin: top right;
    -ms-transform-origin: top right;
    transform-origin: top right;

    -webkit-transform: skew(-5deg) rotate(-3deg);
    -moz-transform: skew(-5deg) rotate(-3deg);
    -ms-transform: skew(-5deg) rotate(-3deg);
    -o-transform: skew(-5deg) rotate(-3deg);
    transform: skew(-5deg) rotate(-3deg);
    -webkit-box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
    -moz-box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
     box-shadow: 0 30px 6px 10px rgba(100, 100, 100, 0.5);
     z-index: -1;
}

.box:after {
    left: auto;
    right: 20px;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -ms-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: skew(5deg) rotate(3deg);
    -moz-transform: skew(5deg) rotate(3deg);
    -ms-transform: skew(5deg) rotate(3deg);
    -o-transform: skew(5deg) rotate(3deg);
    transform: skew(5deg) rotate(3deg);
}

注意:我尝试使用white 颜色而不是您最初使用的颜色来使它看起来像图片中的纸张。它可能不是您想要的，如果是这样，请等待另一个更好的答案:)

Demo.

提示:您可以尝试自己更改 box-shadow，尤其是模糊和颜色，使其完全符合您的需要。我在演示中使用的模糊是 6px，但看起来 4px 更好。