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

所以我需要为网站实现这一点，但我无法为图像提供正确的形状以及粉色和蓝色背景。我需要它的响应，但现在当我在小屏幕上尝试它时，css表单就失去了它的形式。使用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>

来源

2017-04-12 Carmen Amaro

如果你和一个白色背景的工作像例如，你可以用类“倾斜”的元素与旋转和: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

来源

2017-04-12 21:32:51 jhawes

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

回答

相关问题