美文网首页WEB前端程序开发程序员我爱编程
WEB前端学习面试:CSS绘制平行四边形

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

作者: web前端小辰 | 来源:发表于2018-05-13 19:43 被阅读65次

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行为也以浏览为主。

给你学习路线,html-css-js-ajax-jq-html5-css3-bootstrap-vue.js-node.js-react.jd

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

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

另一种是使用skew属性。

举个栗子:

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

小编推荐一个学Web前端的学习裙【 五四七,三零二,三八三 】,无论你是大牛还是小白,是想转行还是想入行都可以来了解一起进步一起学习!裙内有开发工具,很多干货和技术资料分享!

平行四边形

相关文章

网友评论

    本文标题:WEB前端学习面试:CSS绘制平行四边形

    本文链接:https://www.haomeiwen.com/subject/hlzldftx.html