display: inline-block
width:0px
height: 0px
border-style: solid
border-width: 100px //与padding、margin属性类似，顺序为上、右、下、左
border-color: red blue orange gray//顺序为上、右、下、左}
css不同的多边形的层写法是不同的。一、梯形代码：
.triangle {
border-bottom: 100px solid #F36823
border-left: 50px solid transparent
border-right: 50px solid transparent
height: 0
width: 100px
}
二、六角星代码：
.triangle{
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 100px solid red
position: relative
}
.triangle:after {
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-top: 100px solid red
position: absolute
content: ""
top: 30px
left: -50px
}
3、五角星代码：
.triangle{
margin: 50px 0
position: relative
display: block
color: #F36823
width: 0px
height: 0px
border-right: 100px solid transparent
border-bottom: 70px solid #F36823
border-left: 100px solid transparent
-moz-transform:rotate(35deg)
-webkit-transform: rotate(35deg)
-ms-transform: rotate(35deg)
-o-transform: rotate(35deg)
}
.triangle:before {
border-bottom: 80px solid #F36823
border-left: 30px solid transparent
border-right: 30px solid transparent
position: absolute
height: 0
width: 0
top: -45px
left: -65px
display: block
content: ''
-webkit-transform: rotate(-35deg)
-moz-transform:rotate(-35deg)
-ms-transform: rotate(-35deg)
-o-transform: rotate(-35deg)
}
.triangle:after {
position: absolute
display: block
color: #F36823
top: 3px
left: -105px
width: 0px
height: 0px
border-right: 100px solid transparent
border-bottom: 70px solid #F36823
border-left: 100px solid transparent
-webkit-transform: rotate(-70deg)
-moz-transform:rotate(-70deg)
-ms-transform: rotate(-70deg)
-o-transform: rotate(-70deg)
content: ''
}
4、六边形代码：
.triangle{
width: 100px
height: 55px
background: #F36823
position: relative
}
.triangle:before {
content: ""
position: absolute
top: -25px
left: 0
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-bottom: 25px solid #F36823
}
.triangle:after {
content: ""
position: absolute
bottom: -25px
left: 0
width: 0
height: 0
border-left: 50px solid transparent
border-right: 50px solid transparent
border-top: 25px solid #F36823
Time: 20200131
绘制图形的套路就是，先拆分，然后再画基本的元素，考虑如何用旋转，变形完成。
最基础的就是如何绘制三角形，这也是相对来说比较难的一个点。
拆分为一个三角形和一个梯形。
梯形还可以再拆分，但是我们可以直接画出梯形来。
拆分为三角形 + 正方形 + 三角形。
总之，用CSS3画了这么一堆东西，都是在练习使用拆解 + 基本元素绘制，变形，旋转，位置设定，伪元素等综合使用。
显示效果：
END.
![python中的{}[]是怎么使用的？](/aiimages/python%E4%B8%AD%E7%9A%84%7B%7D%5B%5D%E6%98%AF%E6%80%8E%E4%B9%88%E4%BD%BF%E7%94%A8%E7%9A%84%EF%BC%9F.png)