用css绘制图形,CSS绘制各种图形的方法

CSS绘制各种图形的方法

Square(正方形)

#square{

width:100px;

height:100px;

backgroud:red;

}

Rectangle(矩形)

#rectangle {

width: 200px;

height: 100px;

background: red;

Circle(圆形)

#circle {

width: 100px;

height: 100px;

background: red;

-moz-border-radius: 50px;

-webkit-border-radius: 50px;

border-radius: 50px;

}

/可以使用百分比值(大于50%)，但是低版本的Android不支持/

Oval(椭圆形)

#oval {

width: 200px;

height: 100px;

background: red;

-moz-border-radius: 100px / 50px;

-webkit-border-radius: 100px / 50px;

border-radius: 100px / 50px;

}

/可以使用百分比值(大于50%)，但是低版本的Android不支持/

Triangle Up(向上的三角形)

#triangle-up {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-bottom: 100px solid red;

}

Triangle Down(向下)

#triangle-down {

width: 0;

height: 0;

border-left: 50px solid transparent;

border-right: 50px solid transparent;

border-top: 100px solid red;

}

Triangle Left(向左)

#triangle-left {

width: 0;

height: 0;

border-top: 50px solid transparent;

border-right: 100px solid red;

border-bottom: 50px solid transparent;

}

Triangle Right(向右)

#triangle-right {

width: 0;

height: 0;

border-top: 50px solid transparent;

border-left: 100px solid red;

border-bottom: 50px solid transparent;

}