css画出的各种图形

最新推荐文章于 2023-04-08 11:59:28 发布

me_yingying

最新推荐文章于 2023-04-08 11:59:28 发布

阅读量239

点赞数

文章标签： css

原文链接:http://www.cnblogs.com/xiaohuochai/p/5028101.html
目录
[1]矩形(#anchor1) [2]圆形(#anchor2) [3]椭圆(#anchor3) [4]直角三角形(#anchor4) [5]正三角形(#anchor5)[6]平行四边形(#anchor6) [7]梯形(#anchor7) [8]六角星(#anchor8) [9]六边形(#anchor9) [10]五角星(#anchor10)
简单图形
矩形

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);
}