前言：最近准备做一个自己的网页，设计稿中导航我准备设计成矩形，也有hover样式展示的矩形，当中一些头像等等。以前除了画圆，好像真没认真画过其他图形，今天就画画我们常见到的几个图形。
在此之前我们有必要了解下什么是伪元素(和它不同的，还有一个概念叫伪类，两者容易混淆)，没有它画不成图形的。
a）伪元素：用来在内容元素的前后插入额外的元素，之所以叫伪元素，就是它们根本就不在文档中生成，只能在外部可见，比如：你F12时，在右边代码框中是不是可以看到？
这里用到的两个伪元素 ①元素之前:before ②元素之后:after
1）圆，没必要了，我们看看三角形
立即学习“前端免费学习笔记（深入）”；
/* CSS */.sanjiao { width: 0px; height: 0px; margin: 30px auto; position: relative; border: 100px solid transparent; border-bottom: 100px solid #3C98D1;/*这里的100px 就是三角形在竖直方向上高度 也就是三角形的高*/ /*border-left: 100px solid #96D1DF;/* 还可以写不同方向上的三角形 */ border-right: 100px solid #5E5E5E; border-top: 100px solid #3C98D1;*/ }/* HTML */
2）圆柱
/* CSS */.yuanzhu { position: relative; height: 200px; width: 50px; background: #5E5E5E; margin: 30px auto; z-index: 999 /* 这个层叠顺序要设置下 不然看到的圆柱顶部不美观 看着就不想圆柱了 */ }.yuanzhu:before { position: absolute; top: -10px; content: ""; width: 50px; height: 20px; border-radius: 50%; background: #A8A8A8; z-index: 99 }.yuanzhu:after { position: absolute; bottom: -10px; content: ""; width: 50px; height: 20px; border-radius: 50%; background: #5E5E5E; z-index: 9 }/* HTML */
3）五角星
画五角星，我们要先知道浏览器几个私有前缀后跟的样式中”deg”表示的是旋转角度,比如“45deg”表示的就是顺时针旋转45度，负的就表示逆时针。
rotate了是transform的其中一个属性，表示2D旋转，也就是二维旋转，它也有三维旋转，transform还有另外几个特性，用的好，做出来的特效 逼格还是挺高的
/* CSS */.wujiaox { width: 0px; height: 0px; position: relative; margin: 30px auto; border: 100px solid transparent; border-bottom: 70px solid #5E5E5E; -webkit-transform: rotate(35deg);/* Safari和Chrome */ -moz-transform: rotate(35deg);/* Firefox */ -ms-transform: rotate(35deg);/* IE 9 */ -o-transform: rotate(35deg); /* Opera */ } .wujiaox:after { content: ""; width: 0px; height: 0px; display: block; border-right: 100px solid transparent; border-bottom: 70px solid #5E5E5E; border-left: 100px solid transparent; position: absolute; top: 3px; left: -105px; -webkit-transform: rotate(-70deg); -moz-transform: rotate(-70deg); -ms-transform: rotate(-70deg); -o-transform: rotate(-70deg); } .wujiaox:before { content: ""; width: 0; height: 0; border-bottom: 80px solid #5E5E5E; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; top: -45px; left: -65px; -webkit-transform: rotate(-35deg); -moz-transform: rotate(-35deg);/* 逆时针旋转35度 */ -ms-transform: rotate(-35deg); -o-transform: rotate(-35deg); }/* HTML */
画五角星时，要注意，一定要设置一个content:””; 不然你是看不到伪类元素所表现出的样式的；两个伪类元素都要设置为绝对定位，父元素设置相对.
4）聊天框
/* CSS */
.chatBox { width: 200px; height: 50px; margin: 30px auto; background: #5E5E5E; border-radius: 5px; position: relative; } .chatBox:before { content: ""; position: absolute; width: 0px; height: 0px; right: 100%; top: 15px; border-top: 8px solid transparent; border-right: 10px solid #5E5E5E; border-bottom: 8px solid transparent; }
/* HTML */
5）八卦图，其实就是一个大半圆+两个小圆构成的
/* CSS */ .bagua { width: 96px; height: 48px; background: #eee; margin: 30px auto; border-color: #000000; border-style: solid; border-radius: 100%; border-width: 0.5px 0.5px 50px 0.5px; position: relative; } .bagua:before { content: ""; border-radius: 100%; background: #FFFFFF; position: absolute; top: 50%; left: 0px; border: 18px solid #000000; width: 12px; height: 12px; } .bagua:after { content: ""; border-radius: 100%; background: #000000; position: absolute; top: 50%; left: 50%; border: 18px solid #eee; width: 12px; height: 12px; }/* HTML */
6）“砖石”图形
首先画一个直角梯形，再通过伪类元素在其下方画一个三角形
/* CSS */ .zhuanshi { width: 50px; height: 0; border-style: solid; margin: 30px auto; border-width: 0 25px 25px 25px; position: relative; border-color: transparent transparent #5E5E5E transparent; } .zhuanshi:after { content: ""; width: 0; height: 0; border-style: solid; border-width: 70px 50px 0 50px; border-color: #5E5E5E transparent transparent transparent; position: absolute; top: 25px; left: -25px; }/* HTML */
CSS3里还有很多话图形的方法方式，需要你慢慢去研究，虽然很少用到，但无聊时，拿来画画，还是挺有趣的.
以上就是CSS3新特性绘制常见图形方法介绍的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1608141.html
微信扫一扫 
支付宝扫一扫 
