Question

所以我需要在一个网站上实现这一点，但是我在给图像提供正确的形状以及粉红色和蓝色背景时遇到了麻烦。我需要它才能做出响应，但是当我在较小的屏幕上尝试时，css表单就失去了它的形式。

目前我的代码是这样的，非常感谢任何帮助，谢谢你。

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title></title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    
</head>

<body>
        <div class="row">
          <div class="skewed">
            <img class="img-responsive dist" src="http://imagenpng.com/wp-content/uploads/2015/03/wallpaper3-1024x639.jpg">
          </div>
          <div class="skewed">
            <img class="img-responsive dist" src="http://imagenpng.com/wp-content/uploads/2015/03/wallpaper3-1024x639.jpg">
          </div>
          <div class="skewed">
            <img class="img-responsive dist" src="http://imagenpng.com/wp-content/uploads/2015/03/wallpaper3-1024x639.jpg">
          </div>
            
        </div>
    </div>
   

</body>

</html>

＆＃13;

{{1}}

＆＃13;

Answer 1

如果您正在使用示例中的白色背景，则可以使用“skewed”类在元素上使用:before和:after旋转一些对象。您可能需要调整我的示例的顶部和左侧定位以适合您的图像。

<强> CSS

.skewed {
  position: relative;
}
.skewed:before,
.skewed:after {
  content: "";
  background: #fff;
  position: absolute;
  z-index: 1;
  width: 400px;
  height: 1000px;
}
.skewed:before {
  top: -100px;
  left: -350px;
  -webkit-transform: rotate(5deg);
}
.skewed:after {
  top: -100px;
  left: 350px;
  -webkit-transform: rotate(5deg);
}

Here's a jsFiddle

使用CSS实现平行四边形图像

1 个答案: