0

CSSでリボン装飾を描く方法

CSSでリボン装飾を描く方法

前記事に引き続きCSSのTipsになります。

今回も可愛らしい装飾をCSSで描いていきたいと思います。装飾の定番とも言える「リボン」をWebサイト上で使いたい時に試してみてください。

 

 

DEMO

 

HTMLを記述

サンプルのHTMLは以下のようになっています。

 

Sample1

ribbon-sample1

CSS

 

Sample2

ribbon-sample2

CSS

 

 Sample3

ribbon-sample3

CSS

 

Sample4

ribbon-sample4

CSS

 

Sample5

ribbon-sample5

CSS

 

サンプルは「font-sizeが16px」、横幅が「50%」の設定になっていますので、サイズを変更したい場合は適宜調整してお使いください。


 

コメントを残す

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

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

mororeco > CSS > CSSでリボン装飾を描く方法