如何在直线的css中创建“平行四边形”形状？

选项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 :(使用偏斜)

.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>