基本图形的CSS样式

基本图形的画法

DOM中文档结构如下：

<div></div>

• 正方形square

CSS中的样式如下：

div{width:200px;height:200px;background:#0FF;}

效果图如下：

• 长方形rectangle

CSS中的样式如下：

div{width:200px;height:100px;background:#0FF;}

效果图如下：

• 圆形circle

CSS中的样式如下：

div{width:200px;height:200px;background:#0FF;border-radius:100px;}

效果图如下：

• 椭圆oval

CSS中的样式如下：

div{width:200px;height:100px;background:#0FF;border-radius:100px/50px;}

效果图如下：

• 三角形triangle

步骤：

1.建立一个div；

2.设置div为正方形，并给四边的边框分别设置相同的宽度和不同的颜色；（不同形状可以通过计算宽度得到）

3.将div宽高设置为0；

4.选定某个方向的小三角形，将其他三个方向的颜色设置为透明transparent;

CSS中的样式及对应效果图如下：

div{width:100px;height:100px;;border-top:20px #0F0 solid;border-right:20px #F00 solid;border-bottom:20px #00F solid;border-left:20px #FF0 solid;}

div{width:0;height:0;border-top:20px #0F0 solid;border-right:20px #F00 solid;border-bottom:20px #00F solid;border-left:20px #FF0 solid;}

div{width:0;height:0;border-top:20px transparent solid;border-right:20px transparent solid;border-bottom:20px transparent solid;border-left:20px #FF0 solid;}

左上：

div{width:0;height:0;border-bottom:50px transparent solid;border-left:50px #F00 solid;}

右上：

div{width:0;height:0;border-bottom:50px transparent solid;border-right:50px #F00 solid;}

左下：

div{width:0;height:0;border-top:50px transparent solid;border-left:50px #F00 solid;}

右下：

div{width:0;height:0;border-top:50px transparent solid;border-right:50px #F00 solid;}