ブロック背景の色が斜めに入る印象的なブロック

 
ブロックの積み重ねでページを構成していくBiNDではレイアウトが単調になりがちです。そんな時、斜めに背景の色が入ることでアクセントになるブロックデザインです。
ブロックの左上が基準に斜めにしています。上下にブロックが隣接する時はmarginなどで調整します。

appeal_007上のブロックには充分な余白が必要です。

あのイーハトーヴォのすきとおった風

 
またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。

appeal_007上のブロックには充分な余白が必要です。

あのイーハトーヴォのすきとおった風

 
またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。


  • ブロック自体にtransformを設定し斜めにしています。
  • transform-originは top left を指定しますので、左上を起点に指定した分右上に斜めになります。そのため上のブロックに入り込みますので上には充分な余白が必要となります。(appeal_007)
  • transform-originは top right を指定しますので、右上を起点に指定した分左上に斜めになります。そのため上のブロックに入り込みますので上には充分な余白が必要となります。(appeal_007a)

Tablet View


appeal_007
 

appeal_007a

SP View


appeal_007
 

appeal_007a