のえら

技術備忘とかメモとか.間違いはつっこんでいただきたい所存.アフィリエイトはやっていません.

「CSSで作る三角形」のメモ書き

プログラミング css

毎回調べるの面倒だからチートシート的な。

<!DOCTYPE html>

<html lang="ja">
  <head>
    <style type="text/css">
      body {
        background: #E0FFFF;
      }
      div {
        width: 0;
        height: 0;
        margin-bottom: 10px;
      }
      .arrow-top {
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 100px solid red;
      }
      .arrow-bottom {
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-top: 100px solid yellow;
      }
      .arrow-left {
        border-left: 100px solid transparent;
        border-right: 100px solid green;
        border-bottom: 100px solid transparent;
        border-top: 100px solid transparent;
      }
      .arrow-right {
        border-left: 100px solid purple;
        border-right: 100px solid transparent;
        border-bottom: 100px solid transparent;
        border-top: 100px solid transparent;
      }
      .arrow-top.opa {
        border-left: 100px solid transparent;
        border-right: 100px solid transparent;
        border-bottom: 100px solid rgba(0, 0, 255, 0.5);
      }
    </style>
  </head>
  <body>
    <div class="arrow-top"></div>
    <div class="arrow-bottom"></div>
    <div class="arrow-left"></div>
    <div class="arrow-right"></div>
    
    <div class="arrow-top opa"></div>
  </body>
</html>

表示はこんな感じ。
f:id:noterr0001:20140626145707p:plain

一番下は透過。

positionで位置指定して四角と組み合わせれば吹き出しっぽく。