3

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

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

最简单的方法是使用背景图像或精灵创建此效果。但是，这将是一个响应式网站，因此图像无法很好地缩放并且可能会损坏，我也无法控制将输入的文本量，因为这是一个侧边栏项目，也将作为一个按钮在整个站点中出现，搜索输入和通用文本。

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

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

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

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

4

1 回答 1

4

使用纯 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

于 2012-12-25T19:27:05.600 回答