利用CSS绘制各种常见的图形

1、正方形.square1{width: 100px;height: 100px;background: #FF00D4;}/* 上面的方法是设置宽度和高度一致就可以实现正方形的效果，下面是用边框border制作正方形 */.square2{width: 0;height: 0;border: 50px solid #FF00D4; /*边框大小等于正方形宽度（或高度）的一半*/}

3、菱形注：菱形的绘制有几种不同的方法，比如通过绘制两个三角形定位叠加在一起形成菱形，最简单的是先绘制正方形，然后旋转45度变成菱形。.diamond{width: 100px;height: 100px;background: #FF00D4;transform: rotate(45deg);transform-origin: 0 100%; /*两个值分别表示水平X、垂直Y方向的值，默认的中心点是center（50%） 此时表示旋转点在左下角*/}

5、梯形.tixing1{border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid #FF00D4;width: 100px;height: 0;}

7、/* 直角梯形 */.tixing3{border-top: 100px solid #FF00D4;border-left: 100px solid transparent;border-right: 100px solid #FF00D4;width: 0;height: 0;}

9、梯形还可以有另外一种实现方式：

11、.triangle2{width: 0;height: 0;border: 50px solid #FF00D4;border-color: transparent #FF00D4 transparent transparent;/*上、右、下、左 */}

13、/* 左上等腰直角 */.triangle4{border-top: 100px solid #FF00D4;border-right: 100px solid transparent;/* 或 border-left: 100px solid #FF00D4; border-bottom: 100px solid transparent; */width: 0;}

15、.triangle6{width: 0;border-top: 100px solid #FF00D4;border-right: 50px solid transparent;}

17、/* 钝角 */.triangle9{width: 0;height: 0;border-top: 50px solid #FF00D4;border-left: 70px solid transparent;border-right: 70px solid transparent;transform: rotate(35deg);}

19、五角星.wujiaoxing{border-bottom: 70px solid #FF00D4;border-left: 100px so造婷用痃lid transparent;border-right: 100px solid transparent;width: 0;height: 0;transform: rotate(-35deg);position: relative;}.wujiaoxing:after{content: "";position: absolute;left: -100px;top: 0;border-bottom: 70px solid #FF00D4;border-left: 100px solid transparent;border-right: 100px solid transparent;width: 0;height: 0;transform: rotate(70deg);}.wujiaoxing:before{content: "";position: absolute;left: 6px;top: -40px;border-bottom: 60px solid #FF00D4;border-left: 26px solid transparent;border-right: 26px solid transparent;width: 0;height: 0;transform: rotate(35deg);}

21、实心圆.shixinyuan{width: 100px;height: 100px;background: #FF00D4;border-radius: 50px;/* border-radius: 50%; */}

23、上半圆.shangbanyuan{width: 100px;height: 50px;background: #FF00D4;border-radius: 50px 50px 0 0;}

25、四分之一半圆.one-four-banyuan{width: 50px;height: 50px;background: #FF00D4;border-radius: 0 0 50px 0;}

27、椭圆-垂直方向.tuoyuan-vertical{width: 100px;height: 200px;background: #FF00D4;border-radius: 50px/100px; /* 水平/垂直 */}

29、胶囊-垂直方向.jiaonuan-vertical{width: 100px;height: 200px;background: #FF00D4;border-radius: 50px; /* 值必须大于或等于宽度的一半*/}

31、饼状图.binzhuangtu{width: 0;height: 0;border:50px solid #FF00D4;border-radius: 50%;border-left-color: #3C00FF;}

33、欧朋浏览器图标.opera-logo{width: 258px;height: 278px;background: #FF00D4;border-radius: 100%;position: relative;}.opera-logo:before{content: "";position: absolute;left: 66px;top: 22px;width: 122px;height: 230px;background: #fff;border-radius: 100%;}

35、心形的绘制原理：首先绘制一个正方形，然后利用伪元素和定位绘制两个半圆，旋转一定的角度形成

37、六边形.liubianxing{width: 100px;height: 50px;background: #F僻棍募暖F00D4;position: relative;}.liubianxing:before{content: "";position: absolute;left: 0;top: -40px;border-bottom: 40px solid #FF00D4;border-left: 50px solid transparent;border-right: 50px solid transparent;width: 0;}.liubianxing:after{content: "";position: absolute;left: 0;top: 50px;border-top: 40px solid #FF00D4;border-left: 50px solid transparent;border-right: 50px solid transparent;width: 0;}

39、气泡对话框.qibaoduihuakuang{width: 300px;height: 180px;background: #FF00D4;border-radius: 50%;position: relative;}.qibaoduihuakuang:before{content: "";width: 0;height: 0;border:24px solid #FF00D4;border-radius: 50%;position: absolute;left: -50px;bottom: 0px;}.qibaoduihuakuang::after{content: "";width: 0;height: 0;border:12px solid #FF00D4;border-radius: 50%;position: absolute;left: -90px;bottom: -25px;}

41、月亮.yueliang{width: 100px;height: 100px;background: #FF00D4;border-radius: 50%;position: relative;}.yueliang:before{content: "";position: absolute;left: -30px;top: -15px;width: 100px;height: 100px;background: #fff;border-radius: 50%;}原理：由两个圆通过定位叠加形成。

43、徽章丝带#badge-ribbon {position: relative;background: #FF00D4;height: 100px;width: 100px;border-radius: 50px;}#badge-ribbon:after,#badge-ribbon:before{content: "";position: absolute;left: 55px;top: 72px;border-bottom: 65px solid #FF00D4;border-left: 25px solid transparent;border-right: 25px solid transparent;transform: rotate(145deg);}#badge-ribbon:before{transform: rotate(-145deg);border-bottom: 65px solid #FF00D4;left: -5px;}

45、无限符图形#infinity {position: relative;width: 212px;height: 100px;}#infinity:before,#infinity:after{position: absolute;left: 0;top: 0;content: "";width: 60px;height: 60px;border: 20px solid #FF00D4;border-radius: 60px 60px 0 60px;transform: rotate(-45deg)}#infinity:after{transform: rotate(135deg);right: 0;left: auto;}