CSS methods for drawing various graphics

高洛峰
Release: 2017-02-15 13:25:45
Original
1388 people have browsed it

CSS methods of drawing various graphics

Square(square)

CSS绘制各种图形的方法

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

Rectangle(rectangle)

CSS绘制各种图形的方法

#rectangle {
    width: 200px;
    height: 100px;
    background: red;
Copy after login
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
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
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
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
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
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
Copy after login


CSS method of drawing various graphics


Square (square)

CSS绘制各种图形的方法

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

Rectangle(rectangle)

CSS绘制各种图形的方法

#rectangle {
    width: 200px;
    height: 100px;
    background: red;
Copy after login
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
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
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
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
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
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
Copy after login
For more CSS methods to draw various graphics and related articles, please pay attention to the PHP Chinese website!


Related labels:
css
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template