css - 折纸效果

Question

我在整个互联网上搜索了可以回答我的问题或至少给我一个起点的东西。

如果可能的话，我想用纯 CSS 创建下面的图像:

最简单的方法是使用背景图片或 Sprite 创建此效果。然而，这将是一个响应式网站，因此图像不会很好地缩放并且可能会损坏，我也无法控制将输入的文本量，因为这是一个侧边栏元素，也将作为按钮在整个网站上显示、搜索输入和通用文本。

该网站已经富含 JavaScript，因此非 JavaScript 解决方案将是理想的选择。另外，我不会处理 JavaScript。

我猜 CSS 渐变的使用很重，但我不确定如何将效果分成四个部分并确保它可以根据文本量向下缩放。

盒子的 3d 方面是我在某些时候需要担心的其他事情。

任何帮助或指点将不胜感激。

Answer 1

使用纯 CSS(3) 你可以做到。我们需要 transform:skew()。每个盒子都有自己的 div。 CSS 每个 div。 :before 需要伪元素来“修复”两个底部元素不需要的顶部倾斜。

HTML

​<div class="origami">
    <div class="origami-box origami-box1"></div>
    <div class="origami-box origami-box2"></div>
    <div class="origami-box origami-box3"></div>
    <div class="origami-box origami-box4"></div>
    <div class="origami-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS

.origami {
    margin-top:100px;
    margin-left:100px;
    width:160px;
    position:relative;
}
.origami-box {
    height:80px;
    width:80px;
    float:left;
}
.origami-box1 {
    background:red;
    -webkit-transform:skew(0deg,-4deg);
    -moz-transform:skew(0deg,-4deg);
    transform:skew(0deg,-4deg);
}
.origami-box2 {
    background:blue;
    -webkit-transform:skew(0deg,4deg);
    -moz-transform:skew(0deg,4deg);
    transform:skew(0deg,4deg);
}
.origami-box3 {
    background:green;
    -webkit-transform:skew(0deg,4deg);
    -moz-transform:skew(0deg,4deg);
    transform:skew(0deg,4deg);
}
.origami-box.origami-box3:before {
    content: "";
    display: block;
    width: 80px;
    height: 80px;
    position: relative;
    top: -3px;
    background: green;
    -webkit-transform: skew(0deg,-4deg);
    -moz-transform: skew(0deg,-4deg);
    transform: skew(0deg,-4deg);
}
.origami-box4 {
    background:yellow;
    -webkit-transform:skew(0deg,-4deg);
    -moz-transform:skew(0deg,-4deg);
    transform:skew(0deg,-4deg);
}
.origami-box.origami-box4:before {
    content: "";
    display: block;
    width: 80px;
    height: 80px;
    position: relative;
    top: -3px;
    background: yellow;
    -webkit-transform: skew(0deg,4deg);
    -moz-transform: skew(0deg,4deg);
    transform: skew(0deg,4deg);
}
.origami-content {
    position:absolute;
    top:10px;
    padding:10px;
}​

演示: http://jsfiddle.net/Qwd4R/1