CSSの疑似要素before、afterを使って三角形等の装飾する

自分の作業の忘備録のため、疑似要素を使った装飾を書いていきます。
別に、ここに書かなくてもいいけどね!!

「arrow」というクラスを与えたところに、疑似要素のbeforeとafterを使い標示させていきます。

HTML
<div class="arrow">テキスト</div>

上記のHTMLにCSSを当てていきます。

スポンサーリンク

リストマークやポイントに三角マーク

ノーマルリストマーク

シンプルな三角です。

CSS
.arrow{
    position: relative;
    padding: 0 0 0 16px;
}
.arrow::before{
    content: "";
    position: absolute;
    top: 50%;   /* 縦軸をセンタリングする */ 
    left: 0;
    transform: translateY(-50%);   /* 縦軸をセンタリングする */  
    border: 5px solid transparent;
    border-left: 8px solid #555;   /* 好みで色を変えてください */  
}

下向きの三角

こんな感じの。

CSS
.arrow{
    position: relative;
    padding: 0 0 0 16px;
}
.arrow::before{
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    border: 6px solid transparent;
    border-top: 7px solid #555;   /* 好みで色を変えてください */  
}

丸で囲んだリストマーク

表示イメージはこんな感じです。

CSS
.arrow{
    position: relative;
    padding: 0 0 0 16px;
}
.arrow::before{
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    box-sizing: border-box;
    border: 5px solid transparent;
    border-left: 8px solid #555;   /* 好みで色を変えてください */  
    z-index: 2;
}
.arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: -6px;
    margin: auto;
    content: "";
    width: 16px;
    height: 16px;
    border: 1px solid #555;   /* 好みで色を変えてください */  
    border-radius: 9px;
    background: #FFF;
    z-index: 1;
}  

次へなどに使う「く」の字、大なり小なり

よく見るこんな奴です。

大なり「>」

CSS
.arrow{
    position: relative;
    display: inline-block;
}
.arrow::after{
    content: '';
    width: 8px;
    height: 8px;
    margin-top: -5px;
    border-top: solid 1px #555;   /* 好みで色を変えてください */  
    border-right: solid 1px #555;   /* 好みで色を変えてください */  
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right: -20px;
}

小なり「<」

CSS
.arrow{
    position: relative;
    display: inline-block;
}
.arrow::after{
    content: '';
    width: 8px;
    height: 8px;
    margin-top: -5px;
    border-top: solid 1px #555;  /* 好みで色を変えてください */ 
    border-right: solid 1px #555;   /* 好みで色を変えてください */  
    transform: rotate(225deg);
    position: absolute;
    top: 50%;
    right: -20px;
}

下向きにしたい場合は「transform: rotate(225deg);」を「transform: rotate(135deg);」に変えるだけです。

コメント等に吹き出し

表示イメージはこんな感じです。

HTML
<div class="fuki">テキスト</div>

別にクラス変える必要ないんですけど、吹き出しは吹き出しでしょうという信念のもと、「fuki」に。

CSS
.fuki{
    position: relative;
    background: #EEE;  /* 好みで色を変えてください */ 
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 20px;
}
.fuki:before{
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top: 15px solid #EEE;  /* 好みで色を変えてください */ 
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
}

レスポンシブ対応の大きい三角形

上記のような画面サイズいっぱいに広がるレスポンシブに対応した三角形です。

「vw」を使ってるので、ウインドウサイズの横幅に合わせて大きくなります。
内容に合わせて変更してください。
CSS
.arrow{
    padding-bottom: calc(10vw + 10px); /* 高さに合わせて調節してください。*/  
    position: relative;
    overflow: hidden;
}
.arrow::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0; 
    border-bottom: 10vw solid #555;  /* 好みで高さ色を変えてください */ 
    border-right: 100vw solid transparent;
}

absoluteを使えば、斜め線で区切ったサイトのデザインにも使えます。
その際は「overflow: hidden;」の使い方に注意してください。

上記の反対の三角(左に伸びる三角形)

反対の三角形は「border-right」「border-left」にするだけです。
縦を反転させる場合は「border-bottom」「border-top」にするだけです。

CSS
.arrow{
    padding-bottom: calc(10vw + 10px); /* 高さに合わせて調節してください。*/  
    position: relative;
    overflow: hidden;
}
.arrow::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    border-bottom: 10vw solid #555;  /* 好みで高さ色を変えてください */ 
    border-left: 100vw solid transparent;
}

応用:二つ使ったレスポンシブ三角(切り抜いた形)

うまく使えば大きな「step arrow」なデザインも実装できます。

CSS
.arrow{
    padding-top: calc(10vw + 10px); /* 高さに合わせて調節してください。*/  
    position: relative;
}
.arrow::before,
.arrow::after{
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-bottom: 10vw solid #555;  /* 好みで高さ色を変えてください */ 
}
.arrow::before{
    left: 0;
    border-right: 50vw solid transparent;
}
.arrow::after{
    right: 0;
    border-left: 50vw solid transparent;
}

下向きの大きい三角

下向きの大きい三角のイメージ画像

こんな感じのウインドウサイズに合わせて大きさが変わる三角。

HTML
<div class="arrow_wrap">
     <div class="arrow">テキスト</div>
</div>

vwを使ってるので、要素を包みoverflow: hidden;で横スクロールが発生している部分を隠します。

CSS
.arrow_wrap{
    padding-bottom: 200px; /* 高さに合わせて調節してください。*/ 
    overflow: hidden;
} 
.arrow{
    position: relative;
}
.arrow::after{
    content: '';
    position: absolute;
    top: 100%;
    left: calc(50vw - 50%);
    width: 0;
    height: 0;
    border-top: 200px solid #555; /* 好みで高さ色を変えてください */
    border-left: 50vw solid transparent;
    border-right: 50vw solid transparent;
}

borderを使わない方法も!

【CSS】borderを使って、三角形作るのはやめませんか? - Qiita
はじめにみなさんは、CSSで三角形をつくる時どのように作っていますか?borderを使って作っていませんか?この記事では、CSSで三角形をつくるベストプラクティスを紹介します。今までの三角形…

clip-path を使った作成方法です。
記事で書かれている通り、borderを使うのは確かにしっくりこないですね。

どの「辺」がどの「部分」と言うのを覚えればすぐ使えます。

まとめ

個人的に上記のCSS以外に、たまーに下記のジェネレーターを使ったりもしてます。
http://apps.eky.hk/css-triangle-generator/ja

今更、書く事ではないぐらいいろんなサイトでも紹介されてるCSSを使った装飾ですが、個人的な忘備録も含めて書きました。
今思えば疑似要素という魅力あふれるキーワード。
何事にも頭に「疑似」ってつけたら、ワクワクとドキドキが止まらないのは僕だけでしょうか?
疑似体験。
疑似お母さん。
疑似体験お母さん。

騙されないように気を付けましょう。

その他のCSS疑似要素(before,after)を使った表示

CSSの疑似要素を使った他の表示方法を、他の記事でも紹介しています。

スポンサーリンク
CSS
東田ダダーンをフォローする
このブログを購読する
当ブログから更新通知を受けてもいいという方はリンクより更新通知の許可をしてください。 東田ダダーンが更新された際、更新した旨、通知されます。
東田ダダーン

コメント

タイトルとURLをコピーしました