Question

HTML code：

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

以下是我想要实现的“纸卷”：

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更好。

Answer 2

我也会接受我的调音:) DEMO 来自我之前的评论

/* prefix auto-generated in demo link */.box
{
  position: relative;
  width: 500px;
  padding: 50px;
  margin: 0 auto 20px auto;
 background:white;
  box-shadow:inset 0 0 0 1px lightgray;
}

.box:before, .box:after
{
  position: absolute;
  width: 50%;
  height: 20px;
  content: ' ';    
  left: 25px;
  bottom: 30px;
  transform: 
    skew(-7deg) 
    rotate(-3deg);

  box-shadow: 
    0 30px 2px 7px rgba(0, 0, 0, 0.3);
  z-index: -1;
}

.box:after
{
  left: auto;
  right: 25px;
  transform: 
    skew(4deg) 
    rotate(3deg);
}
img {
  max-width:100%;
}
body {
  background:#E7EBEC;
}

imageVS CSS render

Answer 3

创建阴影时，有时最好将元素背景用作阴影，同时将其不透明度设置为非常低的数字。

这是一个FIDDLE

html：

<div class="paper"></div>

的CSS：

body {
    background:#ededef;
    padding:0;
    margin:0;
}
.paper {
        position: relative;
    margin:0 auto;
    height:100px;
    width:500px;
    background:#ffffff;
    border:1px solid #dcdcdc;
}
.paper:before {
    position: absolute;
    width: 45%;
    height: 20px;
    content:' ';
    left: 10px;
    bottom: -8px;
    background:black;
    opacity:0.2;
    -webkit-box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.8);
    box-shadow: -2px 2px 4px rgba(0, 0, 0, 0.8);
    -webkit-transform: skew(0deg,-5deg);
    -moz-transform: skew(0deg,-5deg);
    transform: skew(0deg,-5deg);
    z-index: -1;
}
.paper:after {
    position: absolute;
    width: 45%;
    height: 20px;
    content:' ';
    right: 10px;
    bottom: -8px;
    background:black;
    opacity:0.2;
    -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    -webkit-transform: skew(0deg,5deg);
    -moz-transform: skew(0deg,5deg);
    transform: skew(0deg,5deg);
    z-index: -1;
}

使用CSS3创建纸张卷曲

3 个答案:

Demo.