如何在css中創建一個「平行四邊形」形狀，並帶有直邊？

Question

我想創建一個平行四邊形與直的右側在CSS中，但到目前爲止，我正在努力實現這一目標。

我使用的CSS ...

-webkit-transform: skew(-18deg); 
-moz-transform: skew(-18deg); 
-o-transform: skew(-18deg); 

...以 '歪斜' 矩形以形成平行四邊形。

我想知道右側是否可以變直？

它需要：之前和之後：在CSS？

任何幫助，這將是偉大的。

感謝，

菲爾

Answer 1

您可以通過添加一個三角形元素和定位實現這一目標它緊挨着矩形元素。

選項1：（使用邊界劈）

在下面的例子中，我添加藍色爲三角形狀只是爲了說明如何形狀來實現的。請替換下面一行中的顏色，以獲得平行四邊形，一邊是斜邊，另一邊是直邊。

更改下面

border-color: transparent blue blue transparent; 

到

border-color: transparent red red transparent; 

注：使用此方法時，很難產生額外外邊框添加到形狀。

段：

.trapezoid{ 
 
    position: relative; 
 
    height: 100px; 
 
    width: 100px; 
 
    background: red; 
 
    margin-left: 50px; 
 
    color: white; 
 
} 
 
.trapezoid:after{ 
 
    position: absolute; 
 
    content: ''; 
 
    left: -50px; 
 
    top: 0px; 
 
    border-style: solid; 
 
    border-color: blue transparent blue transparent; 
 
    border-width: 100px 0px 0px 50px; 
 
}

<div class="trapezoid">Some dummy text</div>

---

選項2：（使用skew）

.trapezoid{ 
 
    position: relative; 
 
    height: 100px; 
 
    width: 100px; 
 
    background: beige; 
 
    border: 1px solid red; 
 
    border-left-width: 0px; 
 
    margin-left: 50px; 
 
} 
 
.trapezoid:before{ 
 
    position: absolute; 
 
    content: ''; 
 
    left: -25px; 
 
    top: -1px; 
 
    height: 100px; 
 
    width: 50px; 
 
    background: beige; 
 
    border: 1px solid red; 
 
    z-index: -1; 
 
    -webkit-transform: skew(20deg); 
 
    -moz-transform: skew(20deg); 
 
    transform: skew(20deg); 
 
}

<div class="trapezoid">Some dummy text.</div>

Answer 2

添加此ID任何DIV你會看到預期的結果

#trapezoid { 
    border-bottom: 100px solid red; 
    border-left: 50px solid transparent; 
    height: 0; 
    width: 100px; 
} 

JSFIDDLe