如何在 css 中创建一个直边的“平行四边形”形状？ [复制]答案

【问题标题】：How do I create a 'Parallelogram' shape in css with a straight side? [duplicate]如何在 css 中创建一个直边的“平行四边形”形状？ [复制]
【发布时间】：2014-11-17 12:54:36
【问题描述】：

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

我正在使用 css ...

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

...“倾斜”矩形以创建平行四边形。

我想知道右侧是否可以直？

在 css 中是否需要 :before 和 :after ？

对此的任何帮助都会很棒。

谢谢，

菲尔

【问题讨论】：

嗨，哈利，是的，我的意思是一侧是直的。你知道我可以添加什么额外的元素吗？
你需要this吗？
几乎是哈利，我附上了一张我希望它看起来如何的图片。 postimg.org/image/61grr0dnd 干杯，菲尔
谢谢哈利，下面已经回答了。梯形是#trapezoid { border-bottom: 130px solid black; 的答案。左边框：50px 纯透明；高度：0；宽度：100px； }
是的，我也喜欢这种方法，因为它没有添加任何额外的元素。一件事只是为了你的注意。使用下面发布的两种当前方法，您将无法为形状添加额外的边框。如果您需要，我们必须使用不同的方法。

标签： css shape css-shapes

【解决方案1】：

将此 id 添加到任何 div 你会看到预期的结果

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

JSFIDDLe

【讨论】：

@web-tiki 为所需结果编辑
编辑后的版本很整洁:)
感谢您的帮助

【解决方案2】：

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

选项 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;
}

&lt;div class="trapezoid"&gt;Some dummy text&lt;/div&gt;

选项 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);
}

&lt;div class="trapezoid"&gt;Some dummy text.&lt;/div&gt;

【讨论】：