CSSで三角形のマークを表示するコードを紹介します。
borderプロパティで表現する方法です。トリッキーなコードでもありますので、描画のロジックを含めて紹介します。
以下のコードを記述します。
<!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>
.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;
}
下記のコードは100x100ピクセルの領域の外枠を描くコードです。一般的なコードです。
実行結果の画像の一番上の四角の枠がこのコードに相当します。
<div class="TriMarkPre0"></div>
.TriMarkPre0 {
position: static;
width: 100px;
height: 100px;
border: 10px solid transparent;
border-color: #0058e2;
}
下記のコードにより、領域の枠の左側のみを描画します。左側を描画した場合、角の部分は斜めにカットされていることがわかります。(４辺を描いた場合にそれぞれの線が重ならないよう、半分のみ描画されます。)
実行結果の画像の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ファイルを表示すると下図が表示されます。
描画する枠線の位置を変更することで、三角形の向きを変えて描画できます。
<!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>
.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;
}
CSSのbackground-imageプロパティにSVGを記述して三角形を表現する方法です。
.TriMark {
width: 10px;
height: 10px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2010%2010%27%3E%3Cpolygon%20points%3D%270%2C0%200%2C10%2010%2C5%27%20fill%3D%27%230058e2%27/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
.TriMark {
width: 10px;
height: 10px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2010%2010%27%3E%3Cpolygon%20points%3D%2710%2C0%2010%2C10%200%2C5%27%20fill%3D%27%230058e2%27/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
.TriMark {
width: 10px;
height: 10px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2010%2010%27%3E%3Cpolygon%20points%3D%270%2C10%2010%2C10%205%2C0%27%20fill%3D%27%230058e2%27/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
.TriMark {
width: 10px;
height: 10px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2010%2010%27%3E%3Cpolygon%20points%3D%270%2C0%2010%2C0%205%2C10%27%20fill%3D%27%230058e2%27/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
以下のコードを記述します。
<!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="CssMarkSvg.css" />
</head>
<body>
<h1>SVGによる三角マーク</h1>
<div class="Content"><div class="TriMarkLeft"></div>AAAA</div>
<div class="Content"><div class="TriMarkRight"></div>BBBB</div>
<div class="Content"><div class="TriMarkUp"></div>CCCC</div>
<div class="Content"><div class="TriMarkDown"></div>DDDD</div>
</body>
</html>
.TriMarkLeft {
display: inline-block;
width: 10px;
height: 10px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2010%2010%27%3E%3Cpolygon%20points%3D%270%2C0%200%2C10%2010%2C5%27%20fill%3D%27%230058e2%27/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
.TriMarkRight {
display: inline-block;
width: 10px;
height: 10px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2010%2010%27%3E%3Cpolygon%20points%3D%2710%2C0%2010%2C10%200%2C5%27%20fill%3D%27%230058e2%27/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
.TriMarkUp {
display: inline-block;
width: 10px;
height: 10px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2010%2010%27%3E%3Cpolygon%20points%3D%270%2C10%2010%2C10%205%2C0%27%20fill%3D%27%230058e2%27/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
.TriMarkDown {
display: inline-block;
width: 10px;
height: 10px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2010%2010%27%3E%3Cpolygon%20points%3D%270%2C0%2010%2C0%205%2C10%27%20fill%3D%27%230058e2%27/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
.Content {
}
HTMLファイルを表示すると下図が表示されます。
