Question

我仍然在学习CSS3和响应式设计。

Stack很棒，并且在许多情况下都有所帮助，但我仍然坚持这一点。

我想要一个有角度图像的响应式网站，所以我试图使用响应的并排div或重叠的div。 I found this bit of code以下Fiddle但仍无法按预期/期望工作。

这是{{3}}这是一个良好的开端，但最终我无法顺利调整

<body>

<div style="background-color:red;
            width:300px;
            height:100px;
            position:relative;
            top:10px;
            left:80px;
            z-index:2">
</div>
<div style="background-color:yellow;
            width:300px;
            height:100px;
            position:relative;
            top:-60px;
            left:35px;
            z-index:1;">
</div> 
<div style="background-color:green;
            width:300px;
            height:100px;
            position:relative;
            top:-220px;
            left:120px;
            z-index:3;">
</div>

</body>

最好是并排div或重叠div，以进行流体响应调整？

由于我可能没有解释我正在寻找的东西，这是我试图解释的理想结果的草图

enter image description here

Answer 1

你想要这样的东西吗？

https://jsfiddle.net/7h0dL9jc/9/

HTML：

<body>
    <div style="margin-left: 15%;">
        <div class="box" style="background-color:red;"></div>
        <div class="box" style="background-color:yellow;"></div>
        <div class="box" style="background-color:green;"></div>
    </div>
</body>

的CSS：

.box {
    background-image: url('https://placeimg.com/640/480/any');
    width:33%;
    height:200px;
    float:left;
    display: inline-block;
    -ms-transform: skewX(-5deg); /* IE 9 */
    -webkit-transform: skewX(-5deg); /* Safari */
    transform: skewX(-5deg);
}

CSS3在响应式设计中使用重叠或并排定位

1 个答案: