CSS methods for drawing various graphics-CSS Tutorial-php.cn

CSS methods for drawing various graphics

高洛峰

Release： 2017-02-15 13:25:45

Original

1228 people have browsed it

CSS methods of drawing various graphics

Square(square)

CSS绘制各种图形的方法

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

Copy after login

Rectangle(rectangle)

CSS绘制各种图形的方法

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

Copy after login

Circle

CSS绘制各种图形的方法

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

Copy after login

/ Percentage values (greater than 50%) can be used, but lower versions of Android cannot Support /

Oval(oval)

CSS绘制各种图形的方法

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

Copy after login

/ Percentage value (greater than 50%) can be used, but lower versions of Android do not support it /

Triangle Up(Upward Triangle)

CSS绘制各种图形的方法

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

Copy after login

Triangle Down(Down)

CSS绘制各种图形的方法

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

Copy after login

Triangle Left

CSS绘制各种图形的方法

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

Copy after login

Triangle Right

CSS绘制各种图形的方法

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

Copy after login

CSS method of drawing various graphics

Square (square)

CSS绘制各种图形的方法

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

Copy after login

Rectangle(rectangle)

CSS绘制各种图形的方法

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

Copy after login

Circle(circle)

CSS绘制各种图形的方法

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

Copy after login

/ Percentage values (greater than 50%) can be used, but lower versions of Android do not support it/

Oval (oval)

CSS绘制各种图形的方法

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

Copy after login

/ Percentage values (greater than 50%) can be used, but lower versions of Android do not support it/

Triangle Up (upward triangle)

CSS绘制各种图形的方法

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

Copy after login

Triangle Down

CSS绘制各种图形的方法

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

Copy after login

Triangle Left

CSS绘制各种图形的方法

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

Copy after login

Triangle Right(right)

CSS绘制各种图形的方法

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

Copy after login

For more CSS methods to draw various graphics and related articles, please pay attention to the PHP Chinese website!