利用CSS可以画出各种需要的图形
目录
[1]矩形
[2]圆形
[3]椭圆
[4]直角三角形
[5]正三角形
[6]平行四边形
[7]梯形
[8]六角星
[9]六边形
[10]五角星
简单图形
矩形
div{
width: 100px;
height: 100px;
background-color: red;
}
圆形
div{
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
椭圆
div{
width: 100px;
height: 50px;
background-color: red;
border-radius: 50%;
}
直角三角形
div{
width: 0;
height: 0;
border: 50px solid transparent;
border-bottom-color: red;
}
正三角形
div{
width: 0;
height: 0;
border: 50px solid transparent;
border-width: 50px 43.3px;
border-bottom-color: red;
}
平行四边形
div{
margin-left: 50px;
width: 100px;
height: 100px;
background-color: red;
transform: skew(30deg);
}
梯形
div{
width: 50px;
border: 50px solid transparent;
border-bottom-color: red;
}
复杂图形
六角星
两个三角形叠压
div{
position: relative;
width: 0;
border: 50px solid transparent;
border-width: 50px 43.4px;
border-bottom-color: red;
}
div:after{
position: absolute;
content:"";
width: 0;
border: 50px solid transparent;
border-width: 50px 43.4px;
border-top-color: red;
top: 16px;
left: -42px;
}
六边形
两个梯形拼接
div{
position: relative;
width: 50px;
border: 50px solid transparent;
border-bottom-color: red;
}
div:after{
position: absolute;
content:"";
width: 50px;
border: 50px solid transparent;
border-top-color: red;
top:50px;
left: -50px;
}
五角星
一个大三角形底部掏掉一个小三角形；两个前面的相同图形叠压
<body>
<div></div>
<div></div>
</body>
div {
margin-left: 100px;
position: relative;
width: 0px;
border: 50px solid transparent;
border-width: 100px 35px;
border-bottom-color: red;
}
div:after{
content: "";
position:absolute;
width: 0;
border: 100px solid transparent;
border-width: 25px 50px;
border-bottom-color: white;
top: 51px;
left: -50px;
}
div:last-child{
top: -164px;
left: 52px;
transform: rotate(72deg);
}