使用纯的CSS绘制简易的图形

使用纯的CSS绘制简易的图形

    CSS这一看似很简单的样式语言在使用中非常灵活，特别是随着 CSS3 的广泛使用，以及Ajax的的持续火爆带来的对网页标准化要求，CSS要求每位web程序员都应该掌握。今天给大家带来用纯的 CSS绘制方法基本图形的方法。

绘制正方形

.square{            width:100px;            height:100px;            background:red;                 }

绘制长方形

.rect{            width:100px;            height:50px;            background:red;    }

绘制三角形

上三角形

.triangleUp1{            width:0px;            height:0px;            border-left:50px solid transparent;            border-right:50px solid transparent;            border-bottom:100px solid green;            }

上直角三角形

.triangleUp2{            width:0px;            height:0px;            border-right:100px solid transparent;            border-bottom:100px solid green;            }

下直角三角形

    .triangleDown        {            width:0px;            height:0px;            border-top:100px solid green;            border-left:100px solid transparent;         }

绘制三角形的基本原理就是将div缩成一个点，利用border的相互挤压效果以及设置transparent效果显示需要显示的内容：border的挤压效果如下：

.press        {            width:150px;            height:150px;            background:#FFFFFF;            border-top:50px solid red;            border-right:50px solid green;            border-bottom:50px solid silver;            border-left:50px solid blue;        }

    将div的width和height都设置成0px，即div被缩成一个点，border的挤压效果如下：

    这里把top，right，bottom，left的都设置成50px，此时再通过transparent设置就能绘制出想要的三角形。

绘制圆形

    CSS3的border-radius属性

    .circle            {                width:100px;                height:100px;                border:1px solid red;                border-radius:50%;            }

椭圆

        .oval            {                width:150px;                height:100px;                background:red;                border-radius:50%;                }