CSS3 三角形 ひし形 等の作成方法

Archives Details

CSS3 三角形ひし形等の作成方法

CSS3

2011.04.17

この記事は最終更新日から1年以上が経過しています。

前回の

CSSで図形三角形＆台形

の応用で、二等辺三角形、ひし形を使い色々な図形を作成します。

まず、復習です。

HTML

<div id="triangle"></div>

CSS3

#triangle {
  height: 0px;
  width: 0px;
  border: 50px solid #000;
  border-color: transparent;
  border-top-color: #000;
}

これで、

このような図形ができます。

border-top-colorを、border-bottom-color、border-left-color、border-right-color、に

それぞれ変更すると、

こうなる。

では、最初のcssをちょっとばらしてみましょう、

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

ばらしてみるとこうなります。最初に書いた記述より多くなるが、描画される結果は一緒。

上向き三角形は

border-bottom:#000 50px solid;

と記述し、その他のborderを

border-○○:50px solid transparent;

とすればよい。

同様に上向き、右向き、左向きの三角形は、向けたい方向（逆のボーダー）に#000 50px solidを

設定すればそれぞれの三角形ができます。

正三角形じゃなく、二等辺三角形、ひし形に挑戦。

ただ、値を変化すれば二等辺三角形はできます。

#triangle {
  height: 0px;
  width: 0px;
  border-top: 0px solid transparent;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: #000 60px solid;
}

leftとrightの値を等しくすれば二等辺三角形の完成です。

直角三角形は左右の値を0にしちゃえば

#triangle {
  height: 0px;
  width: 0px;
  border-top: 0px solid transparent;
  border-left: 0px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: #000 40px solid;
}

こんな感じにできちゃいます。

ではひし形。

まず、左向きの二等辺三角形を作成。

#triangle {
  height: 0px;
  width: 0px;
  border-top: 20px solid transparent;
  border-left: 0px solid transparent;
  border-right: #000 40px solid;
  border-bottom: 20px solid transparent;
}

こんな感じで表示される。

色々なやり方があるのですが、簡単なやり方は、

反射させるプロパティbox-reflectを使いましょう！

css3のbox-reflectプロパティは、図形や画像を反射させて表示することが可能です！

ここでは、値をrightに設定。

-webkit-box-reflect:right;

この一行を加えるだけで、

あらま。ひし形の完成！

#triangle {
  height: 0px;
  width: 0px;
  border-top: 20px solid transparent;
  border-left: 0px solid transparent;
  border-right: #000 40px solid;
  border-bottom: 20px solid transparent;
  -webkit-box-reflect: right;
}

数値を変えることで