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を使用して平行四辺形画像を実現する

答えて

関連する問題