正方形 - square 长方形 - rectangle 半色长方形 - rectangle with half color 渐变长方形 - gradient-rectangle 思路：css background: liner-gradient(45deg,blue,red) 0 deg 在x轴 圆形 - circle 圈框 - circle 球圈形 - circle 椭圆 - oval 核心：border-radius: 100px / 50px; 半椭圆 - half oval 核心：border-radius: 50% / 100% 100% 0 0; 四分之一椭圆 - quarter oval 核心： border-radius: 100% 0 0 0; 上三角形 - topTriangle 右三角形 - rightTriangle 下三角形 - bottomTriangle 左三角形 - leftTriangle 思路1：设置border为50px solid color,设置不显示颜色的color为transparent
思路2：设置border为50px solid transparent,设置显示颜色的color为xx 左上三角形 - leftTopTriangle 右上三角形 - rightTopTriangle 左上三角形 - rightBottomTriangle 左上三角形 - leftBottomTriangle 平行四边形 - parallelogram 梯形 - trapezoid 思路：上三角的写法加上width即可 六角星 - star-six 思路：一个上三角加一个下三角 五角星 - star-five-step-1 思路：step by step step1: step2: add rotate final: 五边形 思路： 一个三角形加一个倒梯形 自己需要计算三角函数。。。 六边形 思路： 一个三角形加一个矩形加一个倒三角形 八边形 思路： 一个梯形加一个矩形加一个倒梯形 爱心 思路： 一个左倾斜子弹头加一个右倾斜子弹头 无限大 思路：一个圈加一个圈 吃豆人 思路：利用border 对勾 思路：设置一个带有border的矩形，将左和上border置空，再将矩形倾斜45度微调即可 背景梯形1 思路：一个矩形搭一个三角形 注意两边不能存在margin 背景梯形2 (推荐使用) 思路：使用css的transform属性控制一个倾斜的平行四边形，与上面的方法相比，可以在一段范围内显示，不必铺满整个屏幕， 但是对于特别宽的屏幕的仍然需要特别的技巧处理