2013.03.16
css

CSSで三角形を作る方法

こちら(CSSだけでリボン・アニメーション・メニュー)で書いたようにCSSで三角形を作る方法は、使い方次第でデザインの幅が広がりますね。
一体どういった仕組みなのか説明します。

CSSで三角形を作るしくみ

HTMLのソース

<h2>①上下左右のボーダーの色を全て違う色にしてみた場合</h2>
<div class="border">
</div>
<br/>
<h2>②上のボーダーをtransparentにした場合</h2>
<div class="border2">
</div>
<br/>
<h2>③左のボーダー以外をtransparentにすると三角形ができる!</h2>
<div class="border3">
</div>
<br/>
<h2>④三角形に関係ないですが、ボーダーの角を丸くしてみるとカワイイですね。</h2>
<div class="border4">
</div>

CSSで三角形を作るのでHTMLは特別なことはありません。

CSSのソース。

ちょっと変化が分かるように4パターンで見ていきます。

①上下左右のボーダーの色を全て違う色にしてみた場合

少し分かりやすいように上下左右に全部違うボーダーの色をしてみます。

.border {
     width:0;
     height:0;
     border-left:#EC8E9E 25px solid;
     border-bottom:#ADCB92 25px solid;
     border-right:#FCEB9D 25px solid;
     border-top:#69F 25px solid;
}

②上のボーダーをtransparent(透明)にした場合

リボン・アニメーション・メニューはこれと同じで左右のボーダーをtransparentにしてます。

.border2 {
	 width:0;
     height:0;
     border-left:#EC8E9E 25px solid;
     border-bottom:#ADCB92 25px solid;
     border-right:#FCEB9D 25px solid;
     border-top:transparent 25px solid;
}

③左のボーダー以外をtransparentにすると三角形ができる!

この要領で、上のボーダー以外、下のボーダー以外、右のボーダー以外をTransparentにすると三角形の向きが調節できます。

.border3 {
     width:0;
     height:0;
     border:transparent 25px solid;
     border-left:#EC8E9E 25px solid;
}

④ボーダーの角を丸くしてみるとカワイイですね。

三角形に関係ないですが、デザインとしては何かに使えそう?!

.border4 {
     width:0;
     height:0;
     border-left:#EC8E9E 25px solid;
     border-bottom:#ADCB92 25px solid;
     border-right:#FCEB9D 25px solid;
     border-top:#69F 25px solid;
     border-radius:1em;
}
関連する記事

コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP