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

参见英文答案 > How to bevel the corner of a block div?4个
我试图在css中创建一个直线右侧的平行四边形,但到目前为止,我正在努力实现这一目标.

我正在使用CSS …

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

…’扭曲’矩形以创建平行四边形.

我想知道右侧是否能伸直？

它需要：在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>