シンプルウェイ制作班|WEB制作スタッフブログ

三角形の作り方

2015年04月21日

三角形はborder(枠線)を使って表現することができます。
borderの四辺に違う色を指定して確認してみましょう豆電球

【border:3px; を指定した、50pxの正方形】
width:50px;
height:50px;
border-top:3px solid #FF7FBF;
border-left:3px solid #FFFF7F;
border-right:3px solid #7F7FFF;
border-bottom:3px solid #7FFFBF;


【border:20px; を指定した、50pxの正方形】
width:50px;
height:50px;
border-top:20px solid #FF7FBF;
border-left:20px solid #FFFF7F;
border-right:20px solid #7F7FFF;
border-bottom:20px solid #7FFFBF;


中央の白い四角形(50px正方形)をなくすために
width:0px;
height:0px;
を指定してみましょう。

【border:20px; を指定した、0pxの正方形】
width:0px;
height:0px;
border-top:20px solid #FF7FBF;
border-left:20px solid #FFFF7F;
border-right:20px solid #7F7FFF;
border-bottom:20px solid #7FFFBF;


上記ピンクの三角形を表示させる場合、他の三角形をtransparent(透明化)で消します。
width:0px;
height:0px;
border-top:20px solid #FF7FBF;
border-left:20px solid transparent;
border-right:20px solid transparent;
border-bottom:20px solid transparent;


下向き三角形の完成です。
もうお気づきでしょうが、右向き、左向き、上向き三角形も同様に作成できますねにこにこ
その他、border-width の値を調整すると、三角形のサイズも変えることができます。

お役立ちサイトとして
CSS triangle generator
では、頂点やサイズ、色を指定するだけで
簡単に三角形を作成することができます。

吹き出しや、簡単なアイコンなど作成する際に
使ってみてください犬

同じカテゴリー(CSS)の記事画像
世界各国のwebデザイン~バレエ団編~
GIFじゃなくてもアニメーションができる!CSS3のキーフレームを使ったコマ送りアニメーション
サイトにひと手間!CSS3アニメーション
Webフォントを使ってみませんか
英数字で途中改行するスタイル
同じカテゴリー(CSS)の記事
 世界各国のwebデザイン~バレエ団編~ (2016-03-28 15:58)
 text-shadowを使ってテキストを装飾 (2015-08-24 13:49)
 GIFじゃなくてもアニメーションができる!CSS3のキーフレームを使ったコマ送りアニメーション (2014-09-16 17:47)
 transformで回転したとき、ジャギるのを直す方法 (2014-09-01 12:12)
 サイトにひと手間!CSS3アニメーション (2014-02-17 18:18)
 Webフォントを使ってみませんか (2011-09-06 16:21)
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。

コメントフォーム

名前:
メール:
URL:
コメント:
上の画像に書かれている文字を入力して下さい

<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

過去記事
最近のコメント
QRコード
QRCODE
読者登録
メールアドレスを入力して登録する事で、このブログの新着エントリーをメールでお届けいたします。解除は→こちら
現在の読者数 2人
新規投稿

新規投稿するにはログインする必要があります。会員IDをお持ちでない方はIDを取得された後に投稿できるようになります。

このページの先頭へ