CSSで三角形を表現したいときは、『CSS三角形作成ツール』が簡単で便利！
CSSで三角形を表現しようとすると、
意外と思いつかない…
(と、思ってたのは自分だけ？笑)
そんなときには便利なツールを使っちゃいましょう。
CSS三角形作成ツール
使い方は簡単。
『方向』、『タイプ』、『サイズ』、『色』
を選ぶと三角形が自動生成されるので、あとは表示されているCSSをコピペするだけ。
簡単ですね～
使用例
三角形が簡単に扱えるようになると、表現の幅が広がります。
コードも置いておきますので、好きなようにアレンジしてみてください。
今回は疑似要素(before,after)を使って表現してみました。
1.シンプルに
- これはリストです
- CSS三角形作成ツール
- とても便利
リストの左側に三角形を置いただけですが、
シンプルで見やすいですね。
html
<ul class="style-simple">
<li>これはリストです</li>
<li>CSS三角形作成ツール</li>
<li>とても便利</li>
</ul>css
ul li {
position: relative;
z-index: 0;
padding-left: 25px;
font-weight: 500;
}
ul.style-simple li:before {
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
left: 11px;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 6px;
border-color: transparent transparent transparent #107194;
content: "";
}2.円の中に三角形
- これはリストです
- CSS三角形作成ツール
- とても便利
円の中に三角形を入れたバージョンです。
シンプルかつ、目を引くデザインなので、
個人的にかなり気に入って使っています。
border-radiusを無くして円を四角形にしてもいいですし、
円を枠線のみにするパターンもありですね。
html
<ul>
<li class="style-circle">これはリストです</li>
<li class="style-circle">CSS三角形作成ツール</li>
<li class="style-circle">とても便利</li>
</ul>css
ul li {
position: relative;
z-index: 0;
padding-left: 25px;
font-weight: 500;
}
ul.style-circle li:before {
position: absolute;
top: 0;
bottom: 0;
z-index: 2;
left: 9px;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 4px 0 4px 6px;
border-color: transparent transparent transparent #fff;
content: "";
}
ul.style-circle li:after {
position: absolute;
top: 0;
bottom: 0;
left: 3px;
margin: auto;
width: 16px;
height: 16px;
background-color: #107194;
border-radius: 50%;
content: "";
}3.吹き出し
よく見る吹き出しの見出し
こういうちょっとおしゃれな見出しよく見ますよね、
シンプルで可愛いです。
どうやって作っているかと言うと、
大きい四角形に下向きのちっちゃい三角形を左下にくっつけています。
図形の組み合わせ技ですね。
html
<div class="style-baloon">よく見る吹き出しの見出し</div>
css
.style-baloon {
background-color: #107194;
padding: 15px 15px;
border-radius: 5px;
position: relative;
color: #fff;
font-size: 20px;
}
.style-baloon:before {
position: absolute;
bottom: -15px;
z-index: 2;
left: 20px;
margin: auto;
width: 0;
height: 0;
border-style: solid;
border-width: 20px 20px 0 20px;
border-color: #107194 transparent transparent transparent;
content: "";
}
まとめ
CSS三角形作成ツールを紹介してみました。
画像を使わなくても、色々表現することができるので、
ぜひ試してくださいね。
ここまで読んでいただきありがとうございました。
