css - 如何在 css 中创建一个直边的 'Parallelogram' 形状？

Question

<分区>

Answer 1

您可以通过添加三 Angular 形元素并将其放置在矩形元素旁边来实现此目的。

选项 1:(使用边框 hack)

在下面的示例中，我为三 Angular 形添加了蓝色，只是为了说明该形状是如何实现的。请替换下一行中的颜色以获得一侧斜边另一侧直边的平行四边形。

改变下面的

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>