CSSのみを使い、ドットやストライプの背景パターンを作成する方法です。 基本のスタイルを調整するだけで複数のパターンを生成できます。 今回はグラデーション(gradient)を活用してパターンを作成していきます。 Safariへの実装時の注意! 透過のCSSグラデーションでSafari、iphoneだけ透明の箇所が黒くなる現象があります。 こちらの解決法としてはtransparentで指定している部分をrgbaの記述に変更することで回避可能です。 例) transparent → rgba(255,255,255,0) ボーダーパターン .bg_border { background-color: #8be4f0; background-image: linear-gradient(-90deg, #fff 50%, transparent 50%); background-size: 1