とあるエンジニアの作業ブログ

Web製作

CSSで背景(background-color)を斜めにする

投稿日:2019年1月27日 更新日:

本サイトの紹介ページのように、CSSだけで背景を斜めにします。

生贄投票
無料サンプル
すんどめ!!ミルキーウェイ
無料サンプル
インゴシマ
無料サンプル
パラダイス監獄〜つぐみのお仕事〜
無料サンプル

やりたいこと

以下のように右斜め上を支点として回転させ、二つのイメージが同色で重なることで下辺が斜めになるような背景を作る。

右斜め上を支点に回転1
右斜め上を支点に回転2

HTMLとCSS

HTML

CSS(上のイメージではわかりやすさのためにoverflow: visible;にしています。)

ポイント

支点の位置(transform-origin)

支点の位置は、基本的にright/leftとtopを指定すればOK。三角形は斜辺が最も長くなるため、例のように下辺を斜めにしたい時でもtopを支点に回転させれば親オブジェクトの高さよりも斜辺が必ず長くなる。

  • 左下がりor左上がり ··· 右上を支点(transform-origin: right top;)
  • 右下がりor右上がり ··· 左上を支点(transform-origin: left top;

after擬似要素のheightと親オブジェクトのwidth

親要素のwidthが長くheightが場合には注意が必要。以下のように左側がafter擬似要素でカバーしきれなくなる。
右斜め上を支点に回転3
このような場合には、支点をbottomにしてafter擬似要素のheightを大きくしてカバーする。
右斜め上を支点に回転4
CSS

-Web製作
-,

執筆者:


comment

メールアドレスが公開されることはありません。

関連記事

MacでのAdobeクラウドストレージ活用と作業用ディレクトリ

最近Macを買い換えた。新しいMacはStorageを256にしたのでローカルにバンバンファイルを保存するのには不安が残る。 そこで、これを機に本格的にローカルへのファイル保存をやめて、全てクラウドス …

【WordPress】アフィリエイト広告の自動出し分け

ブログに表示するアフィリエイト広告を自動で出し分けるショートコードを作りました。CSVで表示したいアフィリエイト広告を複数登録しておけば、ランダムに出し分けてくれます。 目次 処理概要 ソースコード …

Stinger8のサイドバーにプロフィールを表示する

Stinger8のサイドバーにプロフィールを表示します。 目次 前提 作業手順 ウィジェットにHTMLを記述 CSSで見た目を整える 前提 WordPressがインストールされている Stinger8 …

【備忘】gitのglobal userとlocal user使い分け

Macで初めてgit commitした時に、「お前は誰だ?」的な感じで怒られた。

でユーザー名とメールアドレスを指定する必要があるらし …

【WordPress】サーバーのテーマファイルをFTPで自動バックアップ

私みたいに趣味でWordPressを使ってる人はレンタルサーバーを借りてサイトを公開していると思います。 最近のレンタルサーバーにはバックアップ機能が標準/オプションで用意されているものがほとんどです …