個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

リボン風の見出しをCSS3だけで実装する方法

リボン風の見出しをCSS3だけで実装する方法

見出しでリボン風の装飾をCSS3だけで実装する方法をご紹介します。
利用するのはboderプロパティです。
ちょっと値を工夫するだけで実装できるので、サイトのアクセントにも利用できます。
ご参考になれば幸いです。

リボン風の見出しをCSS3だけで実装する:HTMLを記述する

まずはHTMLを記述します。
ポイントは空のspan要素を準備すること。
このspan要素にclass属性を設定し、これに対してCSSで装飾します。

リボン風の見出しをCSS3だけで実装する:CSSを記述する

つづいてCSSを記述します。
h1に対しては通常通りに記述して、背景を実装しますが、margin-left: -20px;で左に少しずらすのがポイントです。

リボン風の見出しをCSS3だけで実装する方法

リボンがかかったようにみせるため、リボンの下部分を実装していきます。
widthとheightは0pxにするのがポイントです。
これで、borderプロパティを利用してリボン下部分を実装します。
border-leftとborder-rightで三角形を描きます。
色を赤と青で見ると、以下のような形になっています。
border-topがリボンの下側になっていることがわかります。

リボン風の見出しをCSS3だけで実装する方法

赤色部分の色をtransparent 透明にすれば、三角形だけに形になるとうわけです。
あとは、positionプロパティで、位置を調整して完成です。

リボン風の見出しをCSS3だけで実装する方法

ここまでは、「Quick Tip: Practical CSS Shapes」を参考に作成しました。

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 1
  • 3

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!

table作成の決定版!html/cssで素早く手軽に表組みをしたいなら「Tables Generator」がおすすめ!

html/cssでtableを組むのって、手間がかかりますよね。 そんなとき便利なのがジェネレータ

記事を読む

CSS3をお手軽・簡単にするCSS3関連ツール&ジェネレーター43

ベンダープレフィックスを自動で付けられるPrefixrがサービス終了!が後継者「Express Prefixr」現る

ベンダープレフィックスを簡単につけることができるWEBサービスPrefixr。 ところが、このPr

記事を読む

オリジナルなアイコンフォントの作り方・使い方

いまさら聞けない無料でオリジナルなアイコンフォントを作る方法・利用する方法

アイコンフォントは便利だ、という声をあちこちで耳します。 遅ればせながら私も使ってみましたが、本当

記事を読む

息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater

息抜きに火星ツアーに出かけよう!火星をバーチャル・ツアーできるDiscovering Gale Crater

火星をバーチャル・ツアーできるDiscovering Gale Craterをご紹介します。 Lo

記事を読む

参考にしたい!シンプルで美しいWEBデザイン50(〜2014.02)

2014年2月現在までに公開されているサイトのうち、美しくスッキリしたデザインをコレクションしてみま

記事を読む

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS Shakeを使ってみた

CSSだけでブルブル震えるエフェクトを簡単実装!CSS shakeを使ってみた すでにお気づき

記事を読む

CSSグラデーションを簡単につくれる「Colorful CSS Gradient Background Generator」

背景画像をサッとつくれる便利ツール20選

背景画像をサッとつくれる便利ツールやサイトをご紹介します。 背景にちょっと手を加えるだけで、見た目

記事を読む

WEBデザインのインスピレーションに!UIデザインのコードスニペットコレクション「CodeMyUI」

WEBデザインのインスピレーションになるUIデザインのコードスニペットがコレクションされた「Code

記事を読む

CSSアニメーションを簡単・思いのままに作成できてしまう「Bounce.js」

CSSアニメーションを簡単・思いのままに作成できてしまう「Bounce.js」

最近のサイトではCSSアニメーションを使って、ユーザーに効果的な見せ方をしているサイトも増えてきまし

記事を読む

人気のHTML/CSSコードサンプル25+おまけ2 from CodePen

CodePenはHTML,CSS,JSのコードサンプル配布サイトです。 紹介されているコードの種類

記事を読む