龙空技术网

前端面试:CSS绘制平行四边形

Owen大前端时代 366

前言:

今天姐妹们对“css画一个矩形”可能比较看重,各位老铁们都想要了解一些“css画一个矩形”的相关内容。那么小编在网摘上网罗了一些对于“css画一个矩形””的相关文章,希望大家能喜欢,看官们快快来学习一下吧!

在考察应试者CSS基础的时候,有时候会要求用CSS绘制一些基础图形。今天向大家介绍一下平行四边形的绘制,如果用到了不用谢我。

一种思路是使用一个矩形的div和两个三角形拼接来形成平行四边形,当然可以使用伪类,这样就不用使用三个元素了。

另一种是使用skew属性。

举个栗子:

 // css .parallelogram { display: inline-block; padding: 50px 100px; border: 1px solid black; transform: skew(-20deg); } //html <div class="parallelogram"></div>

平行四边形

标签: #css画一个矩形