ブログやランディングページでよく見かける切り替え部分を斜めにしたヘッダーです。
コンテンツとコンテンツの切り替えで使用するとシュッとした感じのサイトになりますね。
毎度毎度SVGを用意して作るのが面倒なので、良く使いそうなパターンをご用意しました。
こちらは擬似要素にSVGを指定するなのでサクッと設定できますね。
レスポンシブにも対応していますが、好みに合わせて微調整した方がいいかもしれません。
*SVGを[background-image:]で使用するにはエンコードが必要です。

The post コピペでできる！cssとhtmlのみで作る擬似要素とSVGを使用した斜め切り替えヘッダー first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.

ブログやランディングページでよく見かける切り替え部分を斜めにしたヘッダーです。
コンテンツとコンテンツの切り替えで使用するとシュッとした感じのサイトになりますね。
毎度毎度SVGを用意して作るのが面倒なので、良く使いそうなパターンをご用意しました。
こちらは直接SVGを指定するバージョンです。
レスポンシブにも対応していますが、好みに合わせて微調整した方がいいかもしれません。

The post コピペでできる！cssとhtmlのみで作るSVGを使用した斜め切り替えヘッダー6種 first appeared on コピペっと copypet.jp｜パーツで探す、web制作に使えるコピペサイト。.