歪斜和改變圖像的角度和它的邊界從一個方向到另一個

Question

我想傾斜和改變圖像的角度（從頂部和底部的高度）從一個方向到另一個。我不是100％確定如果我正在使用正確的術語，但下面的例子應該解釋我正在努力實現的目標。

與邊框圖像的例子：

它應該出現在我的網頁上示例*：

或者從基準問題的另一個例子

這是什麼我試過

• 獲取最終圖像並按原樣使用，但問題在於寬度更改時圖像質量下降。
• 一束CSS選擇http://jsfiddle.net/6ksayLx8/

/*Attempt 1*/ 
 
    #box { 
 
     width: 200px; 
 
     height: 200px; 
 
     /*background-color:green;*/ 
 
     position: relative; 
 
     -webkit-transition: all 200ms ease-in; 
 
     -moz-transition: all 200ms ease-in; 
 
     -o-transition: all 200ms ease-in; 
 
     transition: all 200ms ease-in; 
 
    } 
 
    #box:after, #box:before { 
 
     display: block; 
 
     content:"\0020"; 
 
     color: transparent; 
 
     width: 211px; 
 
     height: 45px; 
 
     background: white; 
 
     position: absolute; 
 
     left: 1px; 
 
     bottom: -20px; 
 
     -webkit-transform: rotate(-12deg); 
 
     -ms-transform: rotate(-12deg); 
 
     -o-transform: rotate(-12deg); 
 
     -moz-transform: rotate(-12deg); 
 
     transform: rotate(-12deg); 
 
    } 
 
    #box:before { 
 
     bottom: auto; 
 
     top: -20px; 
 
     -webkit-transform: rotate(12deg); 
 
     -ms-transform: rotate(12deg); 
 
     -o-transform: rotate(12deg); 
 
     -moz-transform: rotate(12deg); 
 
     transform: rotate(12deg); 
 
    } 
 
    /*Attempt 2*/ 
 
    .skew { 
 
     -webkit-backface-visibility: hidden; 
 
     -moz-backface-visibility: hidden; 
 
     backface-visibility: hidden; 
 
     /* the magic ingredient */ 
 
     -webkit-transform: skew(-16deg, 0); 
 
     -moz-transform: skew(-16deg, 0); 
 
     -ms-transform: skew(-16deg, 0); 
 
     -o-transform: skew(-16deg, 0); 
 
     transform: skew(-16deg, 0); 
 
     overflow: hidden; 
 
     width: 300px; 
 
     height: 260px; 
 
     position: relative; 
 
     left: 50px; 
 
     border: 1px solid #666; 
 
    } 
 
    .skew img { 
 
     -moz-transform: skew(16deg, 0); 
 
     -ms-transform: skew(16deg, 0); 
 
     -o-transform: skew(16deg, 0); 
 
     -webkit-transform: skew(16deg, 0); 
 
     transform: skew(16deg, 0); 
 
     position: relative; 
 
     left: -40px; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-6"> 
 
      <div id="box"> 
 
       <img src="http://placehold.it/560x366" class="img-responsive"> 
 
      </div> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
      <div class="skew"> 
 
       <img src="http://placehold.it/560x366" class="img-responsive"> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

其他詳情：

• 網站使用Bootstrap3等解決方案應響應
• 圖片必須有邊界
• 我罰款不支持任何低於IE 9

我已經在谷歌走了直通環節多和不同的搜索詞下面是值得提及：

• CSS3 Transform Skew
• CSS Skew only container, not content
• CSS Transform maker

*請放棄不同的此示例圖像中的顏色和滾動條的顏色。這只是一個解釋結果的例子。

Answer 1

今天我偶然發現這篇文章https://viget.com/inspire/angled-edges-with-css-masks-and-transforms後，似乎做我一直在尋找的任務（我已經感動與影像解決方案，但只是粘貼此這裏等）和活生生的例子可以在https://savingplaces.org/

找到