如何在css中以直边创建“平行四边形”形状？ [英] How do I create a 'Parallelogram' shape in css with a straight side?

问题描述

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

我使用css ...

  -webkit-transform：skew（-18deg）; 
 -moz-transform：skew（-18deg）; 
 -o-transform：skew（-18deg）; 
  

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

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

是否需要：before和：after in the css？

任何帮助都是很好的。

谢谢你，

Phil

解决方案

您可以添加一个三角形元素并将其放置在矩形元素旁边。

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

为三角形添加了蓝色，仅示出了如何实现形状。请更换下面一行中的颜色，以实现一边有斜边，另一边有直边的平行四边形。

更改以下

  border-color：transparent blue blue transparent; 
  

到

  border-color：transparent红色透明; 
  

注意：使用此方法时，

Snippet：

  .trapezoid {position：relative; height：100px; width：100px;背景：红色; margin-left：50px; color：white;}。trapezoid：after {position：absolute; content：''; left：-50px; top：0px; border-style：solid; border-color：blue透明蓝色透明; border-width：100px 0px 0px 50px;}  

  div class =trapezoid>一些虚拟文本< / div>  

< hr>

选项2：（使用 skew ）

  .trapezoid {position ：相对; height：100px; width：100px;背景：米色; border：1px solid red; border-left-width：0px; margin-left：50px;}。trapezoid：before {position：absolute; content：''; left：-25px; top：-1px; height：100px; width：50px;背景：米色; border：1px solid red; z-index：-1; -webkit-transform：skew（20deg）; -moz-transform：skew（20deg）; transform：skew（20deg）;}  

 < div class =trapezoid>一些虚拟文字。< / div>  

I am trying to create a Parallelogram with a straight right side in css but so far I am struggling to achieve this.

I am using css ...

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

...to 'skew' the rectangle to create the Parallelogram.

I am wondering if the right side can be made straight?

Would it require :before and :after in the css?

Any help of this would be great.

Thanks,

Phil

解决方案

You can achieve this by adding a triangle shaped element and positioning it next to the rectangular element.

Option 1: (Using the border hack)

In the example below, I have added a blue color for the triangular shape only to illustrate how the shape is achieved. Please replace the color in the below line to achieve the parallelogram with a slanted edge on one side and a straight edge on the other.

Change the below

border-color: transparent blue blue transparent;

to

border-color: transparent red red transparent;

Note: When using this method, it is difficult to add an extra outer border to the shape.

Snippet:

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

---

Option 2: (Using 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>

这篇关于如何在css中以直边创建“平行四边形”形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！