ウェブデザイナーの毎日のお仕事のメモ

作成日:2019.10.02  最終更新日:2021.06.04

CSS

cssだけで簡単に三角と矢印をつくる方法

テキストのリンクに三角をつけたあしらいはよく見かけるかと思いますが、これを画像ではなく、cssでつくるととても管理が楽だったので、メモです!

三角は画像ではなくcssでつくろう

ボタンにするにはやりすぎ、
ただのテキストリンクよりも目立たせたい。

というときなど、

とか

というデザインのリンクをつくるときの方法です。

三角アイコンの作り方

下の図のような【▶︎】の三角の作り方です。

HTML

お好きなリンク名を入れてください。

<p><a href="" class="icon_tri">三角のあしらいつきのリンク</a></p>

CSS

三角の大きさ、位置などは好みで調整してください。

.icon_tri {
    position:relative;
    display:block;
    padding-left:17px;
}

.icon_tri:before {
    content: "";
    display:inline-block;
    width: 0;
    height: 0;
    border-top: solid 6px transparent;
    border-right: solid 6px transparent;
    border-bottom: solid 6px transparent;
    border-left: solid 6px #666;
    position: absolute;
    top: 50%;
    left:2px;
    margin-top:-6px;
}

線の三角(矢印)アイコンの作り方

下の図のような【>】の三角の作り方です。

HTML

お好きなリンク名を入れてください。

<p><a href="" class="icon_triborder">三角のあしらいつきのリンク</a></p>

CSS

三角の大きさ、位置などは好みで調整してください。

.icon_triborder {
     position:relative;
     display:block;
     padding-left:17px;
 }


.icon_triborder:after {
    content: "";
    border-top: 2px solid #666;
    border-right: 2px solid #666;
    margin-top: -3.5px;
    height: 7px;
    width: 7px;
    position: absolute;
    top: 50%;
    left:0;
    transform: rotate(45deg);
}

最新記事