Css3之画五角星跟六角星

今天我们就用css3来画五角星跟六角星，里面用到了css3的伪元素还有三角形组合起来的

五角星
分三部分，两个钝角三角形在下面叠加在一起，上面一个三角形

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>五角星和六角星</title></head><body><div class="star"></div></body><style>.star{width:0px;height:0px;border-bottom: 70px solid red;border-left: 100px solid transparent;border-right: 100px solid transparent;margin: 100px auto;position: relative;transform: rotate(35deg);-webkit-transform: rotate(35deg);-moz-transform: rotate(35deg);-o-transform: rotate(35deg);}.star::before{content: "";width:0px;height:0px;border-bottom: 70px solid red;border-left: 30px solid transparent;border-right: 30px solid transparent;position: absolute;top: -40px;left:-60px;transform: rotate(-35deg);-webkit-transform: rotate(-35deg);-moz-transform: rotate(-35deg);-o-transform: rotate(-35deg);}.star::after{content: "";width:0px;height:0px;border-bottom: 70px solid red;border-left: 100px solid transparent;border-right: 100px solid transparent;position: absolute;top: 0px;left:-100px;transform: rotate(-70deg);-webkit-transform: rotate(-70deg);-moz-transform: rotate(-70deg);-o-transform: rotate(-70deg);}</style>
</html>

六角星
通过两个三角形叠加在一起然后实现

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>五角星和六角星</title></head><body><div class="star"></div></body><style>.star{width:0px;height:0px;border-bottom: 100px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;margin: 100px auto;position: relative;}.star::before{content: "";width:0px;height:0px;border-bottom: 100px solid red;border-left: 50px solid transparent;border-right: 50px solid transparent;position: absolute;top: 30px;left:-50px;transform: rotate(-180deg);-webkit-transform: rotate(-180deg);-moz-transform: rotate(-180deg);-o-transform: rotate(-180deg);}</style>
</html>

Css3之画五角星跟六角星相关推荐

python画五角星-python画五角星和六角星程序 | 学步园
1.五角星 import turtle turtle.forward(100) turtle.right(144) turtle.forward(100) turtle.right(144) turt ...
python五角星程序显示错误_python画五角星和六角星程序
1.五角星 import turtle turtle.forward(100) turtle.right(144) turtle.forward(100) turtle.right(144) turt ...
python画五角星和六角星程序_python画五角星和六角星程序
1.五角星 import turtle turtle.forward(100) turtle.right(144) turtle.forward(100) turtle.right(144) turt ...
python画五角星和六角星程序
1.五角星 import turtleturtle.forward(100) turtle.right(144) turtle.forward(100) turtle.right(144) turtl ...
python绘制六角星_python画五角星和六角星程序 | 学步园
1.五角星 import turtle turtle.forward(100) turtle.right(144) turtle.forward(100) turtle.right(144) turt ...
python循环绘制六角星_python画五角星和六角星程序
1.五角星 import turtle turtle.forward(100) turtle.right(144) turtle.forward(100) turtle.right(144) turt ...
python画五角星和六角星程序_python画五角星和六角星程序-阿里云开发者社区
1.五角星 import turtle turtle.forward(100) turtle.right(144) turtle.forward(100) turtle.right(144) turt ...
python画五角星和六角星程序_Python-turtle图（五角星、六角星、叠加等边三角形）...
原博文 2020-03-11 16:40 − 绘制五角星 1 #五角星.py 2 import turtle as t 3 t.fillcolor("red") 4 t.begin ...
python画五角星和六角星程序_Python绘制五角星！
问题描述: python中运用turtle图形模块绘制五角星问题分析: Python资源共享群:626017123 turtle绘制图形时,得知图形中重要点的坐标非常重要. 于是,绘制五角星问题转化 ...
python六角星_python畫五角星和六角星程序
1.五角星 import turtle turtle.forward(100) turtle.right(144) turtle.forward(100) turtle.right(144) turt ...

Css3之画五角星跟六角星

Css3之画五角星跟六角星相关推荐

最新文章

热门文章