这32种图形分别为圆形，椭圆形，三角形，倒三角形，左三角形，右三角形，菱形，梯形，长方形，正方形，圆环，平行四边形，五角星，六角星，五边形，六边形，八边形，心形，蛋形，无穷符号，消息提示框，钻石，八卦图，食豆人，扇形，月牙，顶左直角三角形，顶右直角三角形 ，底左直角三角形 ，底右直角三角形 ，八角形， 十二角形。
网页代码中用到（
）和Div边距设置和浮动（margin: 20px 20px; float: left;）。转载自：https://blog.csdn.net/laokdidiao/article/details/51189476
1. 圆形：设置宽度和高度相等，border-radius属性为宽度或高度的一半。
效果图：
#Circle{
width:100px;
height:100px;
float: left;
background: #6fee1d;
-moz-border-radius:50px;
-webkit-border-radius:50px;
border-radius:50px;
}
2.椭圆形：圆形的变体，高度设置为宽度的一半，border-radius属性为高度除以高度一半。
效果图：
#Oval {
width: 200px;
height: 100px;
float: left;
background: #e9880c;
-webkit-border-radius:100px / 50px;
-moz-border-radius:100px / 50px;
border-radius:100px / 50px;
}
3.三角形：宽度和高度设置为0，border设置左，右边透明，底边可见Solid。
效果图：
#Triangle {
width: 0;
height: 0;
float: left;
border-bottom: 100px solid #fcf706;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
4.倒三角形：宽度和高度设置为0，border设置左，右边透明，顶边可见Solid。
效果图：
#InvertedTriangle {
width: 0;
height: 0;
float: left;
border-top: 100px solid #30a3bf;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
5.左三角形：宽度和高度设置为0，border设置上，下边透明，右边可见Solid。
效果图：
#LeftTriangle {
width: 0;
height: 0;
float: left;
border-top: 50px solid transparent;
border-right: 100px solid #466f20;
border-bottom: 50px solid transparent;
}
6.右三角形：宽度和高度设置为0，border设置上，下边透明，左边可见Solid。
效果图：
#RightTriangle {
width: 0;
height: 0;
float: left;
border-top: 50px solid transparent;
border-left: 100px solid #800820;
border-bottom: 50px solid transparent;
}
7.菱形：使用transform和rotate相结合，使两个正反三角形上下显示。
效果图：
#Diamond {
width: 100px;
height: 100px;
float: left;
background: #8e00ff;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin:0 100%;
-moz-transform-origin:0 100%;
-ms-transform-origin:0 100%;
-o-transform-origin:0 100%;
transform-origin:0 100%;
margin: 40px 0 10px 240px;
}
8.梯形：三角形的变体，设置左右两条边相等，并且给它设置一个宽度。
效果图：
#Trapezium {
height: 0;
width: 100px;
float: left;
border-bottom: 100px solid #dc2500;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
网友评论