四时宝库

程序员的知识宝库

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

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

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

另一种是使用skew属性。

举个栗子:

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

平行四边形

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接