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

Web製作

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

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

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

ヌギカケ
無料サンプル
はつにゅ〜
無料サンプル
MILKティーチャー
無料サンプル
twin Milf
無料サンプル

やりたいこと

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

右斜め上を支点に回転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

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

関連記事

【超初心者向け】githubでテーマファイルをバージョン管理する

恥ずかしながらgitでリモートリポジトリ管理するのが初めてなので自分用のメモ。 目次 やりたいこと 動作環境・前提 テーマファイルをmasterブランチで管理するまで 開発用のfeatureブランチ作 …

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

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

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

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

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

【WordPress】画像URLをショートコード化する

imgタグなどでsrc属性を指定する際の、画像uriをショートコード化して環境差異を無くします。 目次 作業の目的 メディア設定の変更 functions.phpにuploadsディレクトリを返すショ …

【Stinger8】固定ページを自由にデザインしてみた

HTML/CSSがかける人は、テーマ標準の固定ページだとデザイン変更しづらいのではないでしょうか?? Wordpressにループって概念があるのはうっすらとは知ってますけど、、、何もあんなにまんまブロ …