[CSS]ヘッダやコンテンツを区切るラインを斜めに実装するCSSやSVGのテクニック総まとめ長方形ではないヘッダやコンテンツが最近増えてきました。その一つとしてヘッダの下、コンテンツを区切るラインを斜めにすることで、簡単にデザインの印象を変えることができます。一見シンプルに見えますが、実装するには慎重を要します。 ラインを斜めに実装するCSSやSVGのテクニックをコードのシンプルさ、コンテンツの生成、対応ブラウザ、パフォーマンスの面から実装に適した方法を詳しく紹介します。 Ultimate Guide to Non-Rectangular Headers 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 斜めのラインをCSSやSVGで作成する方法 斜めのラインをCSSのボーダーで作成 斜めのラインをCSSのグラデーションで作成 斜めのラインをCSSのシェイプで作成 斜めのラインをSVGの背景で作成 斜めのラインをSVGの
![[CSS]ヘッダやコンテンツを区切るラインを斜めに実装するCSSやSVGのテクニック総まとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/073c1ed9139e9dac94415303caed23cb2c34be93/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201701%2F2017020301.png)
