CSSで三角形のマークを表示する - CSS

CSSで三角形のマークを表示するコードを紹介します。トリッキーなコードでもありますので、描画のロジックを含めて紹介します。

コード

以下のコードを記述します。

CssMark.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="CssMark.css" />
</head>
<body>
  <div class="TriMarkPre0"></div>
  <br />
  <div class="TriMarkPre1"></div>
  <br/>
  <div class="TriMarkPre2"></div>
  <br />
  <div class="TriMark"></div>
</body>
</html>

CssMark.css

.TriMarkPre0 {
  position: static;
  width: 100px;
  height: 100px;
  border: 10px solid transparent;
  border-color: #0058e2;
}

.TriMarkPre1 {
  position: static;
  width: 100px;
  height: 100px;
  border: 10px solid transparent;
  border-left-color: #0058e2;
}

.TriMarkPre2 {
  position: static;
  width: 0px;
  height: 0px;
  border: 10px solid transparent;
  border-left-color: #0058e2;
}

.TriMark {
  position: static;
  width: 0px;
  height: 0px;
  border: 5px solid transparent;
  border-left-color: #0058e2;
}

作成過程

作成過程1

下記のコードは100x100ピクセルの領域の外枠を描くコードです。一般的なコードです。
実行結果の画像の一番上の四角の枠がこのコードに相当します。

  <div class="TriMarkPre0"></div>

.TriMarkPre0 {
  position: static;
  width: 100px;
  height: 100px;
  border: 10px solid transparent;
  border-color: #0058e2;
}

作成過程2

下記のコードにより、領域の枠の左側のみを描画します。左側を描画した場合、角の部分は斜めにカットされていることがわかります。(４辺を描いた場合にそれぞれの線が重ならないよう、半分のみ描画されます。)
実行結果の画像の2番目の台形を横に倒したような図形がこのコードに相当します。

  <div class="TriMarkPre1"></div>

.TriMarkPre1 {
  position: static;
  width: 100px;
  height: 100px;
  border: 10px solid transparent;
  border-left-color: #0058e2;
}

完成

下記のコードで三角形のマークが描画できます。
先の左側の辺を描いたコードの高さを縮めることで間の部分がなくなり三角形のマークに見えます。
実行結果の画像の3番目の図形がこのコードに相当します。

  <div class="TriMarkPre2"></div>

.TriMarkPre2 {
  position: static;
  width: 0px;
  height: 0px;
  border: 10px solid transparent;
  border-left-color: #0058e2;
}

線のborderの幅を小さくすることで三角形のマークの大きさを変更できます。
実行結果の画像の4番目の図形がこのコードに相当します。

  <div class="TriMark"></div>

.TriMark {
  position: static;
  width: 0px;
  height: 0px;
  border: 5px solid transparent;
  border-left-color: #0058e2;
}

実行結果

HTMLファイルを表示すると下図が表示されます。

参考

描画する枠線の位置を変更することで、三角形の向きを変えて描画できます。

コード

CssMark2.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
  <link rel="stylesheet" type="text/css" href="CssMark.css" />
</head>
<body>
  <div class="TriMarkRight"></div>
  <br />
  <div class="TriMarkLeft"></div>
  <br />
  <div class="TriMarkTop"></div>
  <br />
  <div class="TriMarkBotom"></div>
</body>
</html>

CssMark.css

.TriMarkRight {
  position: static;
  width: 0px;
  height: 0px;
  border: 15px solid transparent;
  border-left-color: #0058e2;
}

.TriMarkLeft {
  position: static;
  width: 0px;
  height: 0px;
  border: 15px solid transparent;
  border-right-color: #0058e2;
}

.TriMarkTop {
  position: static;
  width: 0px;
  height: 0px;
  border: 15px solid transparent;
  border-bottom-color: #0058e2;
}


.TriMarkBotom {
  position: static;
  width: 0px;
  height: 0px;
  border: 15px solid transparent;
  border-top-color: #0058e2;
}