【郑州第144期】css可以绘制哪些常见的特殊形状？

大家好，我是IT修真院郑州分院第五期学员王姝丽，一枚正直善良的web程序员。

今天和大家分享一下，修真院官网css5任务中， css可以绘制哪些常见的特殊形状？

1.背景介绍

为什么会用css绘制图形？

在写网页的时候，会遇到网站需要装饰一些几何图形的情况，在css绘制图形时，一般要使用到border-radius,transform（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）等属性来实现。用css而不直接切图的原因是可以减少http的请求。而且css是矢量图是根据几何特性来绘制图形，矢量可以是一个点或一条线，它的特点是放大后图像不会失真，文件占用空间较小。位图进行放大和缩小处理都会导致失真。

2.知识剖析

第一步：理解盒子模型中的BORDER

先看图：

可以看做四个梯形的代码

令一个div的长宽都是0。此时这个div可以看近似做是一个无限小的点。并且这个div的content和padding都是0。此时如果我们放大这个div，看到的会是这样的：

可以看到其中的content和padding都是0所以没有了。所以4个边框变成了4个等腰三角形。 其中白色的线的长度，就是border-bottom的线宽。

这个链接里大概有四十多种css做的图形

这是我写的一个八卦，效果是这样的

增加transform:rotate(10deg);的值得话，可以有一个旋转的效果，transform:rotate(10deg);定义 2D 旋转

transform:skew(x-angle,y-angle);定义沿着 X 和 Y 轴的 2D 倾斜转换。

.yin-yang{

width:100px;

height:50px;

border:solid;

border-width:2px2px50px2px;

border-radius:50%;

position:relative;

background-color:white;

transform:rotate(10deg);

}

.yin1{

width:10px;

height:10px;

border-radius:50%;

border:solid20px;

position:absolute;

bottom:-20px;

}

.yin2{

width:10px;

height:10px;

background-color:black;

border-radius:50%;

border:solid20px white;

position:absolute;

left:50px;

bottom: -20px;

}

3.常见问题

什么是SVG？

4.解决方案

解决方法：SVG 指可伸缩矢量图形 (Scalable Vector Graphics), 使用 XML(可扩展的标记语言) 格式定义图形 , 图像在放大或改变尺寸的情况下其图形质量不会有损失。

fill属性设置对象内部的颜色,stroke属性设置绘制对象的线条的颜色。1. 矩形元素rect 2. 圆型元素 　　　　circle 3. 椭圆元素　ellipse 4. 直线元素line 5. 折线元素polyline

这些都是用svg写的，感觉更方便绘图能力强大。

5.扩展思考

SVG 具体的应用场景是怎样的？

Svg应用场景： 1、高保真度复杂矢量文档已是并将继续是 SVG 的最佳点。它非常详细，适用于查看和打印，可以是独立的，也可以嵌入到网页中 2、在WEB项目中的平面图绘制，如需要绘制线，多边形，图片等。 3、在WEB项目中的动画绘制，如需要在一个平面中某个对象需要某种动画效果。

6.参考文献

svg教程

MDN SVG教程

7.更多讨论

canvas和svg的区别

ppt链接

感谢大家观看！

今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！

我的学习邀请码：12164783    或者你可以直接点击此链接：http://www.jnshu.com/login/1/12164783