CSS绘制各种图形的方法

Square(正方形)

clipboard.png

#square{
    width:100px;
    height:100px;
    backgroud:red;
}

Rectangle(矩形)

clipboard.png

#rectangle {
    width: 200px;
    height: 100px;
    background: red;

Circle(圆形)

clipboard.png

#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

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


Oval(椭圆形)

clipboard.png

#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(向上的三角形)

clipboard.png

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

Triangle Down(向下)

clipboard.png

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

Triangle Left(向左)

clipboard.png

 #triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}


Triangle Right(向右)

clipboard.png

#triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}


行走的程序猿
117 声望1 粉丝

行走的程序猿


下一篇 »
Function