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

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にしたのでローカルにバンバンファイルを保存するのには不安が残る。 そこで、これを機に本格的にローカルへのファイル保存をやめて、全てクラウドス …

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

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

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

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

【Stinger8】ページング(page-numbersクラス),サイドバーリストのレイアウト修正

Stinger8の細かなレイアウト修正をします。 目次 トップ下部の投稿一覧をページングする部分(page-numbersクラス)のレイアウト崩れの修正 サイドバーに表示される最近の投稿やアーカイブな …

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

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