如何用CSS画一个平行四边形？

利用CSS 3.0中的 skew 特性，第一个参数为x轴倾斜的角度，第二个参数为y轴倾斜的角度。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><style>.parallel {margin-top: 50px;margin-left: 50px;width: 200px;height: 100px;background: lightblue;transform: skew(-20deg, 0);}</style>
</head><body><div class="parallel"></div>
</body></html>

效果如下所示：

如何用CSS画一个平行四边形？相关推荐

如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形第一步画一个长方形 (Draw a rectangle) 这个长 ...
css画心形原理,如何用 css 画一个心形
如何用 css 画一个心形 (How to draw hearts using CSS) 用两个长方形切圆角倾斜位移并合并为一个心形第一步画一个长方形 (Draw a rectangle) 这个长 ...
如何用CSS画一个三角形？
hello,大家好,最近在看前端的八股,里面有这样一道题,如何用CSS画出三角形?我想以这个题为例,仔细讲一下这个题的技巧,以及对这道题拓展一下,即如何画出圆形和椭圆形? 首先,如何用CSS画一个三角 ...
如何用CSS画一个三角形
border-left-color: border-top-width:中心距顶部距离 .userCard .welcome .triangle{ border: 8px solid transpar ...
扇形图形用html,如何用css画扇形？
如何用css画扇形?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.使用border-radius属性画扇形示例: div{ border-radi ...
如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
[css] 用css画一个太阳
[css] 用css画一个太阳 // css.sun {margin: 200px;width: 200px;height: 200px;border-radius: 50%;background: ...
[css] 请使用css画一个圆，方法可以多种
[css] 请使用css画一个圆,方法可以多种 <div class="circle"></div>1.border-radius.cirlce{width ...

如何用CSS画一个平行四边形？

如何用CSS画一个平行四边形？相关推荐

最新文章

热门文章