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.04.21

    【CSS】要素がはみ出てしまう時のチェック事項 / box-sizingの指定

    CSS

  • 2021.04.09

    コーディング作業に役立つサイト5選

    CSS

    その他

  • 2021.04.07

    【CSS】背景色のみを透過する方法

    CSS

おすすめ記事

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

  • 2020.12.02

    【css】スマホでパンくずを横スクロールさせる方法

    CSS

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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