css五角星代码实例
分类：实例代码
分享一段代码实例，它实现了五角星效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style type="text/css">
div {
float: left;
margin: 50px;
}
/*五角星*/
.star {
position: relative;
display: block;
top: 15px;
border-right: 100px solid transparent;
border-bottom: 70px solid cadetblue;
border-left: 100px solid transparent;
-moz-transform: rotate(35deg);
-webkit-transform: rotate(35deg);
-ms-transform: rotate(35deg);
}
.star:before {
position: absolute;
display: block;
top: -45px;
left: -62px;
border-bottom: 80px solid cadetblue;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
content: '';
-webkit-transform: rotate(-35deg);
-moz-transform: rotate(-35deg);
-ms-transform: rotate(-35deg);
-o-transform: rotate(-35deg);
}
.star:after {
content: '';
position: absolute;
display: block;
top: 3px;
left: -105px;
color: #fc2e5a;
border-right: 100px solid transparent;
border-bottom: 70px solid cadetblue;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
}
</style>
</head>
<body>
<div class="star"></div>
</body>
</html>
css五角星代码实例，这样的场景在实际项目中还是用的比较多的，关于css五角星代码实例就介绍到这了。
css五角星代码实例属于前端实例代码，有关更多实例代码大家可以查看。