CSS实现多种图案

这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;  

}