css-绘制五角星

xyc

   咱们继续之前说的css实现图形的效果方法，今天来说说五角星的实现方法。
   原理：使用transform属性来旋转不同的边来实现。

   效果：
   
   HTML：
   

[HTML] 纯文本查看 复制代码

<div class="div"></div>

   css样式：
   

[CSS] 纯文本查看 复制代码

.div {
	     width: 0;
	     height: 0;
	     float: left;
	     margin: 20px 20px;
	     color: #ff0012;
	     position: relative;
	     display: block;
	     border-right: 80px solid transparent;
	     border-bottom: 60px solid #ff0012;
	     border-left: 80px solid transparent;
	     -moz-transform: rotate(35deg);
	     -webkit-transform: rotate(35deg);
	     -ms-transform: rotate(35deg);
	     -o-transform: rotate(35deg);
	   }
	   .div:before {
	     height: 0;
	     width: 0;
	     content: '';
	     position: absolute;
	     display: block;
	     top: -35px;
	     left: -50px;
	     border-bottom: 60px solid #ff0012;
	     border-left: 20px solid transparent;
	     border-right: 20px solid transparent;
	     -webkit-transform: rotate(-35deg);
	     -moz-transform: rotate(-35deg);
	     -ms-transform: rotate(-35deg);
	     -o-transform: rotate(-35deg);
	   }
	   .div:after {
	     width: 0;
	     height: 0;
	     content: '';
	     position: absolute;
	     display: block;
	     top: 3px;
	     left: -85px;
	     color: #ff0012;
	     border-right: 80px solid transparent;
	     border-bottom: 60px solid #ff0012;
	     border-left: 80px solid transparent;
	     -webkit-transform: rotate(-70deg);
	     -moz-transform: rotate(-70deg);
	     -ms-transform: rotate(-70deg);
	     -o-transform: rotate(-70deg);
	   }

  以上就是五角星的实现效果，后面会继续给大家说说css实现其他图形的样式方法。希望大家多多关注！