基本图形的画法
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;}