cssで付箋紙風デザイン

こんにちは，むぎやんです．

付箋紙風のボックス？をcssで作ってみました．

サンプル

見た目は↓な感じになります．色やサイズも変更可能です．

吾輩は猫である。
名前はまだ無い。
どこで生れたかとんと見当がつかぬ。

吾輩は猫である 1

吾輩は猫である 2

吾輩は猫である 3

サンプルコード

こんな感じのcssです（青色の付箋紙部分のコードです）．

  width: 16.5rem;
  height: 14rem;
  padding: 1.5em;
  overflow: hidden;
  box-shadow: 0 .25rem .25rem hsla(0, 0%, 0%, .1);
  background-image:
    linear-gradient(180deg, hsla(0, 0%, 45%, .1) 2rem, hsla(0, 100%, 100%, 0) 2.5rem)
  , linear-gradient(180deg, hsla(200, 100%, 85%, 1), hsla(200, 100%, 85%, 1));
  font-size: 1.125rem;
  line-height: 1.8;

色を変える

hslaの"h"の値を変えると色が変わります．

/* レッド */
  ...
  background-image:
    linear-gradient(180deg, hsla(0, 0%, 45%, .1) 2rem, hsla(0, 100%, 100%, 0) 2.5rem)
  , linear-gradient(180deg, hsla(15, 100%, 85%, 1), hsla(15, 100%, 85%, 1));  ...

サイズを変える

細めの付箋紙は左側に貼り付け部分がある風にしてみました．

heightとpaddingで細めの外形にして
box-shadowを右に出るように変更
linear-gradientのangleを右向き？に

あとは，一応クランプ処理も追加してます．

/* 細め */
  width: 16.5rem;
  height: 4rem;  padding: 1em 1.5em;  overflow: hidden;
  box-shadow: .25rem 0 .25rem hsla(0, 0%, 0%, .1);  background-image:    linear-gradient(90deg, hsla(0, 0%, 45%, .1) 2rem, hsla(0, 100%, 100%, 0) 2.5rem)  , linear-gradient(90deg, hsla(60, 100%, 85%, 1), hsla(60, 100%, 85%, 1));  font-size: 1.125rem;
  line-height: 1.8;
  white-space: nowrap;  text-overflow: ellipsis;