CSSで三角形を表現しようとすると、
意外と思いつかない…
(と、思ってたのは自分だけ?笑)
そんなときには便利なツールを使っちゃいましょう。
使い方は簡単。
『方向』、『タイプ』、『サイズ』、『色』
を選ぶと三角形が自動生成されるので、あとは表示されているCSSをコピペするだけ。
簡単ですね~
三角形が簡単に扱えるようになると、表現の幅が広がります。
コードも置いておきますので、好きなようにアレンジしてみてください。
今回は疑似要素(before,after)を使って表現してみました。
リストの左側に三角形を置いただけですが、
シンプルで見やすいですね。
<ul class="style-simple">
<li>これはリストです</li>
<li>CSS三角形作成ツール</li>
<li>とても便利</li>
</ul>
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: "";
}
円の中に三角形を入れたバージョンです。
シンプルかつ、目を引くデザインなので、
個人的にかなり気に入って使っています。
border-radius
を無くして円を四角形にしてもいいですし、
円を枠線のみにするパターンもありですね。
<ul>
<li class="style-circle">これはリストです</li>
<li class="style-circle">CSS三角形作成ツール</li>
<li class="style-circle">とても便利</li>
</ul>
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: "";
}
こういうちょっとおしゃれな見出しよく見ますよね、
シンプルで可愛いです。
どうやって作っているかと言うと、
大きい四角形に下向きのちっちゃい三角形を左下にくっつけています。
図形の組み合わせ技ですね。
<div class="style-baloon">よく見る吹き出しの見出し</div>
.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三角形作成ツールを紹介してみました。
画像を使わなくても、色々表現することができるので、
ぜひ試してくださいね。
ここまで読んでいただきありがとうございました。