CSS methods for drawing various graphics

CSS methods of drawing various graphics

Square(square)

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

---

Rectangle(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;
}

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

---

Oval(oval)

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

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

---

Triangle Up(Upward Triangle)

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

---

Triangle Down(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;
}

---

CSS method of drawing various graphics

Square (square)

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

---

Rectangle(rectangle)

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

---

Circle(circle)

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

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

---

Oval (oval)

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

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

---

Triangle Up (upward triangle)

#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(right)

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

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