Question

我已经看到了几个关于这个的问题，并且他们似乎都使用坚实的背景来创造倾斜，如果这是我道歉的另一个问题的重复，我试图无休止地搜索这个。

问题：我想知道如何倾斜div的一侧或两者以实现最终结果，同时使其跨浏览器兼容并具有响应性。

我已附上以下两张图片以帮助演示。

注意：如果有人在div中有文字，我不希望它变得歪曲。如果不能单独使用css，请提供js版本。

两张图片：

最终结果：

Answer 1

使用clip-path和position: absolute在css中可以实现这一点。（不幸的是，这不适用于Firefox或IE）

div {
    position: absolute;
    top: 0;
    height: 400px;
    width: 500px;
}
.img1 {
    background-image: url(http://i.stack.imgur.com/E9Sl2.jpg);
    -webkit-clip-path: polygon(0 35%, 100% 62%, 100% 0, 0 0);
    clip-path: polygon(0 35%, 100% 62%, 100% 0, 0 0);
}
.img2 {
    background-image: url(http://i.stack.imgur.com/Nl3Fw.jpg);
    -webkit-clip-path: polygon(0 35%, 100% 62%, 100% 100%, 0 100%);
clip-path: polygon(0 35%, 100% 62%, 100% 100%, 0 100%);
}

<div class="img1"></div>
<div class="img2"></div>

Answer 2

在所有现代浏览器中获得此结果的一种方法是使用额外的div，至少包含图像。

此div将被旋转，溢出隐藏，然后其中的背景再次以相反的方向旋转

＆＃13;

.base {
    width: 400px;
    height: 300px;
    position: relative;
    overflow: hidden;
    background-image: url(http://placekitten.com/1000/750);
    background-size: cover;
}

.image2 {
    position: absolute;
    width: 120%;
    height: 70%;
    bottom: 50%;
    left: -10%;
    transform: rotate(15deg);
    overflow: hidden;
}

.image2:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 140%;
    top: 20%;
    left: 10%;
    transform: rotate(-15deg);
    background-image: url(http://placekitten.com/1200/900);
    background-size: cover;
}

＆＃13;

<div class="base">
<div class="image2"></div>
</div>

＆＃13;

Answer 3

使用SVG可以获得比剪辑路径+其他一些很酷的东西更好的浏览器支持。

<div class="clip-block">
  <div class="clip-wrap">
    <img src="http://lorempixel.com/200/200/animals/4" alt="" class="clip-svg-1">
  </div>
</div>

<div class="clip-block">
  <div class="clip-wrap">
    <img src="http://lorempixel.com/200/200/animals/6" alt="" class="clip-svg-2">
  </div>
</div>
<svg class="clip-svg">
  <defs>
    <clipPath id="clip-polygon" clipPathUnits="objectBoundingBox" >
      <polygon points="0 0.5, 0 0, 1 0, 1 1" />
    </clipPath>
  </defs>
</svg>
<svg class="clip-svg">
  <defs>
    <clipPath id="clip-polygon2" clipPathUnits="objectBoundingBox" >
      <polygon points="0 1, 0 0, 1 0.5, 1 1" />
    </clipPath>
  </defs>
</svg>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

使用css和透明度的倾斜div

3 个答案: