CSS

2021.02.23

CSSだけで三角形の装飾を作ってコンテンツの境界を区切る方法【コピペで簡単実装】

下画像のように逆三角形の装飾でセクションやコンテンツの境界を区切っているデザインをよく見ますよね。

画像を差し込めば簡単ですが、CSSのみで三角形を作り、コンテンツの境界を区切ることが可能です!

CSSのみで三角形を作る方法

以下コードをご覧ください。

See the Pen 三角形でセクション区切り1 by spiqa design (@spiqa_design) on CodePen.

区切りたい箇所の上のコンテンツにtriangleクラスを指定します。

疑似要素(after)で三角形を作り、表示させています。

vw(Viewport Width)でborder左右をwindow幅分広げる

border左右の幅に50vwを指定し、それぞれWindow幅半分ずつのwidthを確保します。

この状態で、border左右をtransparentで透明にします。

vwについてのご説明は以下記事をご参考ください。

border-topで三角形を作る

border-topのwidthを広げることで三角形を作ることができます。

三角形の高さや色を調整したい場合は、border-topの記述を変更すればOKです。

三角形が横にはみ出してしまう問題

上記コードが三角形でコンテンツやセクションを区切る代表的な手法ですが、実は上記コードでは欠陥があります。

borderの左右幅に50vwを指定した場合、vwはスクロールバーも含めた幅のため、スクロールバー分左側にはみ出してしまうのです。

下画像はわかりやすいように三角形をグリーンにしました。右にはみ出し、スクロールバーが出てしまっているのがわかりますね…。

疑似要素で表示させているために、width: 100%を指定しても効きません。

こちらを解決するには、外にはみ出さないために少し幅を調整する必要があります。

See the Pen 三角形でセクション区切り2 by spiqa design (@spiqa_design) on CodePen.

スクロールバー分の幅を引く

border左右幅を、CSSプロパティ値を計算できるcalc関数を使って、50vwから10px分をマイナスしています。

ちなみにこの10pxはおおよその数字で、正確なスクロールバーの幅ではありません。複数の主要ブラウザではみ出さないように少し多めに設定しています。

三角形を中央配置に

両端から10pxをマイナスしたために三角形が少し小さくなっているので、中央配置してあげます。

position: absolute;で絶対配置しているので、right: 50%;とtransform: translatex(50%);のあわせ技で中央配置します。

CSSのみで三角形を作り、セクション間を区切る方法のまとめ

コンテンツの境界を区切る際に多用するテクニックなので、覚えておくと便利です!

ぜひコピペしてご活用ください!

0

関連記事

  • 2021.07.20

    画面遷移時にページ全体をフェードさせる方法

    CSS

    JavaScript

  • 2021.07.14

    CSSだけで固定背景(パララックスデザイン)を実装する方法【iOS対応方法も紹介】

    CSS

  • 2021.07.13

    (簡単)inputをクリックしたときの枠線の色を変える

    CSS

おすすめ記事

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!