CSS画出的各种形状图

懵懂的女人 提交于 2020-02-02 15:57:35


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

 

原文地址:http://www.cnblogs.com/xiaohuochai/p/5028101.html

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!