簡単な備忘録なんです。
とりあえず、以下のサンプル。

CSSのみ

svgでやってみた。

なんじゃこりゃ。って感じですが、書いてある通りです。
いわゆる、こういった斜線をパターンオーバーレイチックに背景に入れる感じの効果をCSSとsvgのどっちでやった方が楽かなぁ～っていう備忘録です。
基本的にコードが長くなるの嫌いなので、そういった場合CSSで組んだ方が短くなるのだけど、仕上がりが綺麗な方は断然svg。
しかも、斜線以外のデザインも可能だから、今後はsvgメインにしていった方が素敵だよね。（ドット柄とか特に）
問題点といえば、やっぱりsvgの設定が瞬時に分かりにくい。
でも、svg.cssみたいなの一個作って、その中にパターンをたくさんいれてclassで区分すれば、もしかしたら簡単にパターンオーバーレイが作れる！みたいなのできるんじゃないですかね？
あ、色の設定や透明度の設定が面倒か。細かな調整ができないのか・・・。
あとはブラウザの対応か・・・？試してないから分かんない♥

とりあえず、今度気が向いたら使います。
以下、コード。

<h5 class="only">
CSSのみ
</div>
<h5 class="wow">
svgでやってみた。
</div>
<style>
h5{
	padding:0.5em 0.5em;
	border-radius: 5px;
	margin:5em auto;
	color:#FFF;
	font-weight:bold;
	background-color: #FFAA00;
}
.only{
	background: rgba(0, 0, 0, 0) repeating-linear-gradient(-45deg, #FFAA00, #FFAA00 2px, #FFAA00 1px, #FFCC55 5px) repeat scroll 0 0;
}
.wow{
	background-image: url("data:image/svg+xml,%3Csvg width='7' height='7' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.3' fill-rule='evenodd'%3E%3Cpath d='M0 40L40 0H20L0 20M40 40V20L20 40'/%3E%3C/g%3E%3C/svg%3E");
}
</style>

ちなみに
Hero Patterns