CSS可以绘制哪些常见的特殊形状？

这里是修真院前端小课堂，每篇分享文从

【CSS可以绘制哪些常见的特殊形状？ 】

大家好，我是IT修真院北京分院25期的学员，一枚正直纯洁善良的web前端程序员

今天给大家分享一下，修真院官网css任务5，深度思考中的知识点——CSS可以绘制哪些常见的特殊形状

1.背景介绍
在写网页的时候，会遇到需要装饰一些几何图形的情况，用css就可以实现很多特殊形状的绘制。它的特点是放大后图像不会失真，文件的占用空间较小，也可以减少http的请求。

2.知识剖析
在css绘制图形时，一般要使用到border-radius,transform（旋转:rotate,缩放:scale,倾斜:skew,移动:translate)等属性来实现

border-radius的值可以设定为具体的长度或者是百分比。当border-radius的值为百分比时，相对的是包含边框，padding后的尺寸。而不是单纯地相对于width/height值。

旋转 rotate

用法：transform: rotate(45deg);

共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。

缩放 scale

用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);

参数表示缩放倍数；

一个参数时：表示水平和垂直同时缩放该倍率

两个参数时：第一个参数指定水平方向的缩放倍率，第二个参数指定垂直方向的缩放倍率。

倾斜 skew

用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);

参数表示倾斜角度，单位deg

一个参数时：表示水平方向的倾斜角度；

两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

移动 translate

用法：transform: translat