0

CSSで画像にリボン装飾をする方法

CSSで画像にリボン装飾をする方法

ベクターデータなどで見かけるような「リボン」を、「NEW」などのアイコン的要素で画像にひっかけて表示しているサイトなどがあります。一般的にpng画像などで画像を作成し、position属性で絶対配置にして画像の全面に配置するような指定の仕方をすることが多いかもしれませんが、今回はCSSのみでそれを実現する方法をご紹介します。

それでは、サンプルを見ながら確認していきましょう。

 

DEMO

 

 

HTMLを記述

 

4つのパターンをご紹介するために、<div>で囲んだ領域を4つ用意しました。

クラス名「box」には、共通のCSSを割り当てそれぞれ「box-sub1」「box-sub2」…には配置したい場所と見た目を指定するCSSを記述しています。

 

CSSを記述

▼まずは共通のCSSになります。

 

▼個別CSSを記述していきます。

Sample1の場合

サンプル1

 

Sample2の場合

サンプル2

 

Sample3の場合

サンプル3

 

Sample4の場合

サンプル4

 

影となる三角部分を指定するのに少し悩むかもしれませんが、好みのリボンになるように調整してみてください。

 


 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > CSSで画像にリボン装飾をする方法