ブログやＨＰで三角形や台形を表示する方法

ホームページやブログをされてる方は沢山いらっしゃると思います。

更新しているうちに、人と違った表示方法をやりたい・・・などと思われたことがあると思います。

今日は、そんな人のために一つだけテクニックをご紹介してみようと思います。

皆様のご参考になれば有難いと思っております。ぜひ挑戦してみてください！

ＷＥＢ上で三角形や台形を作る方法

1. 作業スペースのDIV要素を使用します。
   左図①のような正方形を作る方法・・・
   線の種類は実線（ｓｏｌｉｄ）で指定し、色をターコイズブルーにする場合
   1. まず作業スペースは幅も高さも0pxに指定します
      <DIV style="width:0px;height:0px"></DIV>
      
      
   2. 次に、線の色を太さ30pxでターコイズブルーに指定してみます。
      <DIV style="width:0px;height:0px;border:solid;border-width:30px;border-color:#00ccff"></DIV>
      これだけで左のような正方形が出来ます。
2. 次に左図②のような正方形の中に三角を作る方法・・・
   1. 先程の正方形は線の太さなわけですので、線の上・右・下・左の部分の色を指定するだけです。
      なので、先程のスタイルシートにborder-bottom-color:redを追加するだけです。
   2. スタイルシートの書きかたは
      <DIV style="width:0px;height:0px;border:solid;border-width:30px;border-color:#00ccff;border-bottom-color:red"></DIV>
      
3. 左図③のような三角形だけをみせる方法・・・
   1. 三角形を残したいのでターコイズ色の部分を見えないようにするには、見えないよう指図するtransparentを使用します。
   2. スタイルシートの書き方はターコイズ色をまず見えないようにします。
      1. <DIV style="width:0px;height:0px;border:solid;border-width:30px;border-color:#00ccff;border-color:transparent"></DIV>
         
         
      2. その後ろに先程の三角形の部分の指定をします。
         <DIV style="width:0px;height:0px;border:solid;border-width:30px;border-color:#00ccff;border-color:transparent;border-bottom-color:red"></DIV>
      ※最後にtransparentを書き込むとすべて不可視化されてしまい何も見えなくなります。
   
   
4. ③までで三角形は出来ましたが・・・
   四角の余計な部分を隠したままなので、位置が下になったままですよね
   左図④のように位置を修正する方法・・・
   1. 左図の場合は上方向に30px上げてます。
      margin-top:-30pxとスタイルシートで調整します。
      因みに、左へ移動の場合はmargin-leftで指定できます。
      <DIV style="margin-top:-30px;width:0px;height:0px;border:solid;border-width:30px;border-color:#00ccff;border-color:transparent;border-bottom-color:red"></DIV>
   
   
5. 最後に、左図⑤のように台形にしたい場合の方法・・・
   
   1. 作業スペースの幅（ｗｉｄｔｈ）を指定すればそれでOKです。例えば、幅を３０ｐｘで指定すれば・・・
      <DIV style="margin-top:-30px;width:30px;height:0px;border:solid;border-width:30px;border-color:#00ccff;border-color:transparent;border-bottom-color:red"></DIV>
      

　色々な三角形や台形が作れますので、試してみてください。もちろん、ＤＩＶ要素なので三角形や台形の中に文字を書き込むことも可能ですよ。