画像を使わずにCSSでエアメールの枠の模様を背景で作る方法

エアメールとはこんなやつです。最近はあまり見かけなくなりましたね、今は別のこの封筒じゃなくても手紙がちゃんと届くってことなんでしょうか？それでも文房具屋さんでは片隅に置かれてたりして、まだまだニーズがありますね。

そんなエアメールの枠線を、CSSで作る方法です。

Air Mail Stripes
By George Beresford

DEMO 表示

codepen_io_thetwistedtaste_full_lCpvm

CSS

*, *:before, *:after {
  box-sizing: border-box;
}
html, body { overflow: hidden: height: 100%; padding: 0; margin: 0;}
.container {
  width: 100vw;
  height: 100vh;
  background-image: repeating-linear-gradient(135deg, #F29B91 0px, #F09290 30px, transparent 30px, transparent 50px, #83B3DB 50px, #84ADCB 80px, transparent 80px, transparent 100px);
  padding: 23px;
}
.container .inner { background: white; width: 100%; height: 100%;}

CSS全体はこの様なコードになっています

特に必要なところはBackground-imageのところ

background-image: repeating-linear-gradient(135deg, #F29B91 0px, #F09290 30px, transparent 30px, transparent 50px, #83B3DB 50px, #84ADCB 80px, transparent 80px, transparent 100px);

これをエアメールの枠線を付けたいときに指定してやればOK

使い道としては、更新情報の一覧とか
時々変わるメッセージとかに、このスタイルを使ってやるのはいいんじゃないでしょうか？

タイトルの見出しを囲うのにもいいかと思います