CSS-Methoden zum Zeichnen verschiedener Grafiken

So zeichnen Sie verschiedene Grafiken mit CSS

Quadrat (Quadrat)

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

---

Rechteck (Rechteck)

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

---

Kreis (Kreis)

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

/ Sie können Prozentwerte (größer als 50) verwenden %), niedrigere Versionen von Android unterstützen jedoch nicht /

---

Oval (oval)

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

/ Sie können Prozentwerte verwenden ​​(mehr als 50 %), aber niedrigere Android-Versionen unterstützen es nicht. Down)

---

Dreieck links (nach links)

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

---

Dreieck rechts (nach rechts)

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

---

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

---

CSS-Methode zum Zeichnen verschiedener Grafiken

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

Quadrat (Quadrat)

---

Rechteck (Rechteck)

Kreis

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

---

/ Sie können verwenden Prozentwerte (größer als 50 %), niedrigere Android-Versionen unterstützen dies jedoch nicht/

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

---

Oval (oval)

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

/ Prozentwerte (größer als 50 %) können verwendet werden, niedrigere Android-Versionen unterstützen dies jedoch nicht /

---

Triangle Up(Upward Triangle)

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

Dreieck nach unten (nach unten)

---

Dreieck nach links (nach links)

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

---

Dreieck rechts (nach rechts)

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

---

Weitere Artikel zu CSS-Zeichenmethoden verschiedener Grafiken Bitte achten Sie auf die chinesische PHP-Website!

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