CSS绘制五角星

一六角形

复制代码代码如下： #星-六{ width : 0；高度： 0;边框-左侧： 50px实心透明；右边框： 50px实心透明；边框-底部： 100像素纯红；相对位置：} #星六：在{ width : 0；高度： 0;边框-左侧： 50px实心透明；右边框： 50px实心透明；边框-顶部： 100像素纯红；绝对位置：内容： " "；top : 30pxleft :-50px；}2 五角星

复制代码代码如下： #星-五{边距： 50px 0；相对位置：显示器：块；颜色：红色；宽度： 0px高度： 0px右边框： 100像素实心透明；边框-bottom: 70px纯红；边框-左侧： 100像素实心透明；-moz-变压器：旋转(35 );-webkit-transform:旋转(35度);-ms-变压器：旋转(35 );表示“具有…性质的”型变压器： 旋转(35 );} #在{边框-底部： 80px之前的五星：纯红；边框-左侧： 30px实心透明；右边框： 30px实心透明；绝对位置：高度： 0;宽度： 0;top :-45px；左侧：-65px；显示器：块；内容： " "；-webkit-transform:旋转(-35 );-moz-变压器：旋转(-35 );-ms-变压器：旋转(-35 );表示“具有…性质的”型变压器： 旋转(-35 );} #星-五：后{位置：绝对；显示器：块；颜色：红色；top : 3pxleft :-105 px；宽度： 0px高度： 0px右边框： 100像素实心透明；边框-bottom: 70px纯红；边框-左侧： 100像素实心透明；-webkit-transform:旋转(-70度);-moz-变压器：旋转(-70度);-ms-变压器：旋转(-70度);o型变压器：旋转(-70度);内容： " "；}3 五边形

复制代码代码如下： #五边形{位置：相对；宽度： 54px边框-宽度： 50px 18px 0；边框样式：实心；边框-颜色：红色透明；} #五角星：以前先于{内容： }；绝对位置：高度： 0;宽度： 0;top :-85px；左侧：-18px；边框-宽度： 0 45px 35px边框样式：实心；边框-颜色：透明透明红色；}4六边形

复制代码代码如下： #六边形{宽度： 100像素；高度： 55px背景：红色；相对位置：} #六边形：before在{内容： }之前；绝对位置：top :-25px；左： 0；宽度： 0;高度： 0;边框-左侧： 50px实心透明；右边框： 50px实心透明；边框-底部： 25px纯红；} #六边形：after在{内容： }之后；绝对位置：底部：-25px；左： 0；宽度： 0;高度： 0;边框-左侧： 50px实心透明；右边框： 50px实心透明；边框-top: 25px纯红；}5 多边形

复制代码代码如下： #八边形{宽度： 100像素高度： 100像素；背景：红色；相对位置：} #八角形：在{内容： }之前；绝对位置：top : 0；左： 0；边框-底部： 29px纯红；边框-左侧： 29px实心# eee右边框： 29px实心# eee宽度： 42px高度： 0;} #八角形：在{内容： }之后；绝对位置：底部： 0；左： 0；边框-top: 29px纯红；边框-左侧： 29px实心# eee右边框： 29px实心# eee宽度： 42px高度： 0;}6 心形

复制代码代码如下： #心{位置：相对；宽度： 100像素；高度： 90px} # heart :前，# heart :后{ position : absolute内容： " "；left : 50pxtop : 0；宽度： 50px高度： 80px背景：红色；-moz-border-radius : 50px 50px 0 0；边界半径： 50px 50px 0 0-webkit-transform:旋转(-45 );-moz-变压器：旋转(-45 );-ms-变压器：旋转(-45 );表示“具有…性质的”型变压器： 旋转(-45 );变压器：旋转(-45 );-web套件-转换-origin : 0 100%；-moz-transform-origin : 0 100%；-ms-transform-origin : 0 100%；-o-transform-origin : 0 100%；变换-原点： 0 100%；} #心：后{左： 0；-webkit-transform:旋转(45 );-moz-变压器：旋转(45 );-ms-变压器：旋转(45 );表示“具有…性质的”型变压器： 旋转(45 );变压器： 旋转(45 );-web套件-转换-origin : 100% 100%；-moz-transform-origin : 100% 100%；-ms-transform-origin : 100% 100%；-o-transform-origin : 100% 100%；变换-原点：100% 100%;}