全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい

0584-73-5123 平日
9:00~18:00

Web blog WEBブログ

外注・下請けホームページ制作TOP
WEBブログ
CSSで三角形や矢印をつくる方法

CSSで三角形や矢印をつくる方法

2019.04.22

フロントエンド(HTML/CSS)

※この記事は2019年04月22日時点の情報をもとに作成されました。

こんにちは。コーダーの兼山です。

忘備録をかねて三角形・矢印のデザインをご紹介します。
文章の強調や、リンクの先頭など、アイコンで配置したい時などに便利です。

【目次】

1. 右向き三角形
2. 左向き三角形
3. 上向き三角形
4. 下向き三角形
5. 山括弧
6. スタンダードな矢印
7. 背景付き三角アイコン
8. 背景付き山括弧アイコン

右向き三角形

See the Pen <a href="https://codepen.io/kaneyama-haru/pen/QeWyPa/">20190422_07</a> by kaneyama (<a href="https://codepen.io/kaneyama-haru">@kaneyama-haru</a>) on <a href="https://codepen.io">CodePen</a>.

左向き三角形

See the Pen <a href="https://codepen.io/kaneyama-haru/pen/Ymzqzw/">20190422_09</a> by kaneyama (<a href="https://codepen.io/kaneyama-haru">@kaneyama-haru</a>) on <a href="https://codepen.io">CodePen</a>.

上向き三角形

See the Pen <a href="https://codepen.io/kaneyama-haru/pen/ZgEQdq/">20190422_08</a> by kaneyama (<a href="https://codepen.io/kaneyama-haru">@kaneyama-haru</a>) on <a href="https://codepen.io">CodePen</a>.

下向き三角形

See the Pen <a href="https://codepen.io/kaneyama-haru/pen/GVRoeq/">20190422_06</a> by kaneyama (<a href="https://codepen.io/kaneyama-haru">@kaneyama-haru</a>) on <a href="https://codepen.io">CodePen</a>.

山括弧

See the Pen <a href="https://codepen.io/kaneyama-haru/pen/QPaeLK/">20190422_02</a> by kaneyama (<a href="https://codepen.io/kaneyama-haru">@kaneyama-haru</a>) on <a href="https://codepen.io">CodePen</a>.

スタンダードな矢印

See the Pen <a href="https://codepen.io/kaneyama-haru/pen/wZpVvM/">20190422_03</a> by kaneyama (<a href="https://codepen.io/kaneyama-haru">@kaneyama-haru</a>) on <a href="https://codepen.io">CodePen</a>.

背景付き三角アイコン

See the Pen <a href="https://codepen.io/kaneyama-haru/pen/vMpoLq/">20190422_04</a> by kaneyama (<a href="https://codepen.io/kaneyama-haru">@kaneyama-haru</a>) on <a href="https://codepen.io">CodePen</a>.

背景付き山括弧アイコン

See the Pen <a href="https://codepen.io/kaneyama-haru/pen/OGzKRM/">20190422_05</a> by kaneyama (<a href="https://codepen.io/kaneyama-haru">@kaneyama-haru</a>) on <a href="https://codepen.io">CodePen</a>.