所以我需要为网站实现此目的，但我无法为图像提供正确的形状以及粉红色和蓝色背景。 我需要它来响应，但现在当我在较小的屏幕上尝试时，所有的 css 表单都丢失了它的形式。
目前我的代码是这样的，任何帮助将不胜感激，在此先感谢您。
who {
font-family: "Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 3vw;
font-weight: 400;
color: white;
margin-top: -9.5%;
margin-right: 12px;
}
.skewed {
background: white;
width: 25%;
height: 500px;
margin-left: 75px;
-webkit-transform: skewX(30deg);
-ms-transform: skewX(30deg);
transform: skewX(-40deg);
overflow:hidden;
-webkit-backface-visibility: hidden;
float: left;
}
.skewed img {
position:absolute;
height: 100%;
width: 100%;
left:-20px;
overflow: hidden;
transform: skewX(40deg);
}<!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>最佳答案
如果您像示例中那样使用白色背景，您可以使用 :before 和 :after 在类为“skewed”的元素上旋转一些对象.您可能需要调整我的示例的顶部和左侧位置以适合您的图像。
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);
}
关于html - 使用 CSS 实现平行四边形图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43379444/