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

Web製作

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

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

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

SとM
無料サンプル
監獄学園 超合本版
無料サンプル
もっとマワして・裏回覧板 デジタルモザイク版
無料サンプル
DEATHTOPIA
無料サンプル

やりたいこと

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

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

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

関連記事

【WordPress】Google Search Consoleへのサイトマップ登録と確認方法

Google Search Consoleにサイトマップを登録するメモ。これをしないとクローラに記事を拾ってもらえない。 7,8年前に1回やったことあるんですが、昔とやり方がめっちゃ変わってて結構焦り …

DMM電子書籍の広告を自動出し分けするショートコード

DMM電子書籍のアフィリエイト広告は、そのままだとiframe使ってたり味気なかったりで使い勝手が悪いので、自分でカスタマイズしてみました。 ついでに、前に作ったアフィリエイト自動出し分けショートコー …

SiTest入門 ~サイトへの導入とABテストの実施まで~

サイト分析・改善ツールのSiTestというツールをがすごいという噂を聞きました。サイト自体を改変することなく、各種スプリットテスト(ABテストやリダイレクトテスト、多変量テスト等)を実施できるほか、ヒ …

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

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

MAMPを移行したらphpMyAdminが起動しなくなった

古いMacからMAMPを個別に移行したら、phpMyAdminが起動しなくなった。 どうやらMySQLのユーザー/パスワードが不一致になってしまったようだ。 関連して他のエラーも発生したため、一連で対 …