如何在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屋!