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

今回はCSSのみで三角形のマークを作る方法を説明していきたいと思います。

こんな感じで、ページの境目などにも使えます。

実はこれ、画像ではなくてCSSのみで作れます。

作り方

擬似要素を用いて簡単に作れます。

コードは以下の通りです。

::after {
        content: ""; 	//擬似要素なので記述してください
        position: absolute; //親要素はrelativeに指定してください
        top: 0; //好きな位置を指定
        left: 45%; //好きな位置を指定
        border: 40px solid transparent; //40pxが幅になります
        border-top: 30px solid white; //30pxが縦の長さになります
        }

作りたいところのCSSにコピペして使えます！

コメントにしているところを参考に使ってみてください。ホワイトの三角形ができると思います。色も適宜変えて試してみてください。

また、なぜ三角形が作れるのか？という解説に関しては、以前書きましたので合わせてご覧ください。