このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2011.04.17

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

前回の

CSSで図形 三角形&台形

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

まず、復習です。

HTML

[code]<div id="triangle"></div>[/code]

CSS3

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

これで、

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

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

それぞれ変更すると、

こうなる。

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

[code]#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;
}[/code]

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

上向き三角形は

[code]border-bottom:#000 50px solid;[/code]

と記述し、その他のborderを

[code]border-○○:50px solid transparent;[/code]

とすればよい。

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

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

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

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

[code]#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;
}[/code]

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

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

[code]#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;
}[/code]

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

ではひし形。

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

[code]
#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;
}
[/code]

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

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

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

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

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

[code]-webkit-box-reflect:right;[/code]

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

あらま。ひし形の完成!

[code]#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;
}[/code]

数値を変えることで

変形も可能!!

これらを応用し、さまざまなアイコンが作成出来ちゃいます!

デモ画面はこちらから

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。