さまざまなグラフィックを描画するための CSS メソッド

CSSで色々なグラフィックを描く方法

Square(正方形)

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

---

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

/パーセンテージ値を使用する(50% を超える) ただし、Android の以前のバージョンでは /

---

Oval (楕円形)

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

#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(への右)

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

---

CSSで色々なグラフィックを描く方法

Square(正方形)

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

---

Rectangle(長方形)

rreee

---

Circle（サークル） )

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

/ パーセント値 (50% を超える) を使用できますが、Android の以前のバージョンではサポートされていません。 /

---

Oval (楕円形)

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

/ パーセント値(50% を超える) も使用できますが、Android の以前のバージョンではサポートされていません。 Triangle Left(To the left)

---

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

Triangle Right(To the right)

---

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

CSS でさまざまなグラフィックを描画する方法に関するその他の関連記事については、PHP 中国語 Web サイトに注目してください。