边框为平行四边形的html,如何在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;

}

Some dummy text

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

}

Some dummy text.