如何在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