Question

我正在尝试在css中创建一个直线右侧的平行四边形，但到目前为止，我正在努力实现这一目标。

我正在使用CSS ...

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

...到＆＃39;倾斜＆＃39;用于创建平行四边形的矩形。

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

它需要：在css之前和之后吗？

任何帮助都会很棒。

谢谢，

菲尔

Answer 1

将此ID添加到任何div，您将看到预期的结果

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

JSFIDDLe

Answer 2

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

选项1：（使用边框黑客）

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

更改以下

border-color: transparent blue blue transparent;

到

border-color: transparent red red transparent;

注意：使用此方法时，很难为形状添加额外的外边框。

代码段

＆＃13;

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

＆＃13;

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

＆＃13;

选项2：（使用skew）

＆＃13 ;

＆＃13;

.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);
}

＆＃13;

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

＆＃13;

如何创建平行四边形＆＃39; css的形状有直边？

2 个答案: