Question

我已经在互联网上搜索了一些能够回答我的问题的内容，或者至少给了我一个起点。

如果可能的话，我想在纯CSS中创建下面的图像：

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

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

我猜测CSS梯度使用量很大，但我不确定如何将效果分割为四个片段，并确保它可以根据文本的数量向下缩放。

盒子的三维方面是我在某些时候需要担心的事情。

非常感谢任何帮助或指示。

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

折纸纸效果

1 个答案: