使用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實現平行四邊形圖像

回答

相關問題