【初心者CSS】Cocoonで「斜めの背景」を使う方法

【初心者CSS】Cocoonで「斜めの背景」を使う方法

LPなどで背景が斜めになったサイトをよく見ますよね。

WordPressでやってみたくていろいろ試してみた結果、こちらのサイトのソースだと簡単綺麗に実現可能でした！

斜めの背景を作るためのCSSは「回転させて元に戻す」で書く！ | HPcode（えいちぴーこーど）

斜めの背景を作るためのCSSの書き方です。要素全体を傾けて中の要素で元に戻すという無理やりぎみな方法となります。 たぶん、はじめて斜めの背景を作る時に困ると思います。わたしの場合、斜めで背景を再現しようと思った時に3パターンほど思いついて試

haniwaman.com

こんなかんじ。

CSSは紹介されているものをそのまま使用します、が、Cocoonだとそのままでははみ出ちゃうので下記を加えました。

 /*mainからはみ出ている部分を隠す*/
#main {
overflow-x:
hidden;
}
 /*mainの1pxボーダーを表示しない*/
.main{
border: 0;
}

【初心者CSS】Cocoonで「斜めの背景」を使う方法　まとめ

短いですがメモしておきたかったので！

たねっぱ！さんありがとうございます！！

斜めの背景を作るためのCSSは「回転させて元に戻す」で書く！ | HPcode（えいちぴーこーど）

斜めの背景を作るためのCSSの書き方です。要素全体を傾けて中の要素で元に戻すという無理やりぎみな方法となります。 たぶん、はじめて斜めの背景を作る時に困ると思います。わたしの場合、斜めで背景を再現しようと思った時に3パターンほど思いついて試

haniwaman.com