用CSS可以实现很多有趣的图案,今天先实现三角星和六角星的分享。
三角星(一)
CSS:
<style>
#div1{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
</style>
HTML:
<body>
<div id="div1"></div>
</body>
三角星(2)
CSS
#div1{
width:0px;
height:0px;
border:50px solid transparent;
border-left-color:red;
}
HTML
<div id="div1"></div>
六角星
CSS:
<style>
#div1{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
position: relative;
}
#div1::after{
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
position: absolute;
content: '';
left: -50px;
top: 20px;
}
</style>
HTML
<body>
<div id="div1"></div>
</body>