如何在CSS的一側製作平行四邊形？

我試圖在CSS中，只有一面是不直的平行四邊形，但我只能得到它的那一刻做雙方，如：如何在CSS的一側製作平行四邊形？

#parallelogram { 
width: 150px; 
height: 100px; 
-webkit-transform: skew(20deg); 
    -moz-transform: skew(20deg); 
    -o-transform: skew(20deg); 
background: red; 
}

其中，在顯示器上彎曲的側左和右。我只需要在右邊。

這是怎麼回事？

來源

2016-07-06 JWDev

然後，它不會是一個平行四邊形......不是嗎？ –

相關 - http://stackoverflow.com/questions/19761202/css3-transform-skew-one-side –

嘗試使用的包裝用overflow: hidden;和負利潤，它只是隱藏左側偏斜側

#parallelogram { 
 
    width: 150px; 
 
    height: 100px; 
 
    -webkit-transform: skew(20deg); 
 
    -moz-transform: skew(20deg); 
 
     -o-transform: skew(20deg); 
 
    background: red; 
 
    margin-left: -19px; /* (tangens(20deg)*100px)/2 */ 
 
} 
 
#wrapper{ 
 
    overflow: hidden; 
 
}

<div id="wrapper"> 
 
    <div id="parallelogram"></div> 
 
</div>

來源

2016-07-06 12:13:46

而不是使用歪斜度，你可以簡單地像邊界玩：

#parallelogram { 
 
\t border-bottom: 100px solid red; 
 
\t border-right: 50px solid transparent; 
 
\t width: 100px; 
 
}

<div id="parallelogram"></div>

來源

2016-07-06 12:30:49

這不適合我。我正在試圖在錨標籤上做到這一點。這導致它們只是一個大方塊，並且內部文本會突破新行，因爲邊界正在推動它。 – JWDev

@JWDev在問題中放置了一段相關的html代碼（以便能夠使用），我會盡我所能;-) –

您可以使用matrix3d() CSS變換，它具有good browser support（IE10 +）。測試一點點與this codepen example爲我們提供了這樣一個例子：

transform-origin: 0 0 0; 
transform: matrix3d(0.66, 0,  0,  0, 
        -0.51, 0.66, 0, -0.0017, 
        0,  0,  1,  0, 
        102,  0,  0,  1);

<img src="http://www.fillmurray.com/300/200" alt="" style="transform-origin: 0 0 0; transform: matrix3d(0.66, 0, 0, 0, -0.51, 0.66, 0, -0.0017, 0, 0, 1, 0, 102, 0, 0, 1);" >

來源

2016-08-04 01:14:10 Sphinxxx

如何在CSS的一側製作平行四邊形？

回答

相關問題