CSS三角形作成ツール
制作の佐々木です
レスポンシブ化に伴い画像使用を極力削っていきたいときに役に立つ
CSSで三角形を作成するのに便利なジェネレーターの紹介です
こちらのサイトで作成できます
http://apps.eky.hk/css-triangle-generator/ja
使い方もシンプルでわかりやすくすぐに作成できます。
コードも書き出してくれます
疑似要素(:after,:beforeなど)に利用するといいと思います。
[css]
.sample:before {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent #000000 transparent;
position: absolute;
bottom: 15px;
right: 0px;
}
[/css]
.sample:before {
content: "";
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 10px 10px;
border-color: transparent transparent #000000 transparent;
position: absolute;
bottom: 15px;
right: 0px;
}
[/css]
このようにCSSで表現できるものは画像で作らずCSSで作成し、軽量化していくと
いいと思います。
