CSSで立体的な帯(リボン)を作る方法

Web制作

こんにちは。
Web制作者のhikaruです。

ここではCSSで、立体的な帯を作る方法を紹介していきます。

作るのは、こんな感じのデザイン。

見出しデザイン

ソースコードはこちらです。

<div class="ribbon-style-outer">
    <p class="ribbon-style">見出しデザイン</p>
</div>
.ribbon-style-outer {
    background: #fff;
    padding-bottom: 10px;
}

.ribbon-style {
    background: #0e3055;
    color: #fff;
    padding: 10px 30px;
    position: relative;
    margin: 0 -10px;
}

.ribbon-style::after, .ribbon-style::before {
    content: "";
    border-width: 10px;
    border-style: solid;
    border-color: #0e3055 transparent transparent transparent;
    position: absolute;
    bottom: -20px;
    z-index: -8;
}

.ribbon-style::before {
    left: 0;
}

.ribbon-style::after {
    right: 0;
}

簡単にソースコード解説していきます。

class名: ribbon-styleに擬似要素でふたつの三角形を作り、positionプロパティで、それぞれの三角形を左右に配置。

そしてclass名: ribbon-styleにネガティブマージン(margin: 0 -10px)を適応して、親要素からはみ出させます。

最後に、はみ出したclass名: ribbon-styleの見え方を、z-indexなどのプロパティや、親要素: ribbon-style-outerにスタイルを適応して調整しています。

最後に

今回は、CSSで立体的な帯(リボン)を作る方法を紹介しました。

Webサイト制作をしていると、CSSで実装するか画像を使用するかで悩むことがあると思います。

個人的には、CSSで実装すると画像よりもファイルサイズが軽くなるので、それほど凝ったデザインで無ければCSSで実装するようにしています。

また、クライアントから画像ベースのサイトをテキストベースに修正して欲しいという要望が来ることもあるので、そんなとき、どこまでできるのかを把握しておくと、自信を持って対応できると思います。

以上、CSSで立体的な帯(リボン)を作る方法でした。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

関連記事

特集記事

コメント

この記事へのコメントはありません。

hikaru

1995年2月生まれ26歳。東京都にあるWeb制作会社に勤務をしています。 犬とコーヒーが好きです。

TOP