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

Web製作

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

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

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

女主任・岸見栄子
無料サンプル
終末のハーレム ファンタジア セミカラー版
無料サンプル
ハダカメラ
無料サンプル
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

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

関連記事

ドローンが飛ぶGIFアニメーションを作ってみた

  上のようなドローンが飛ぶGIFアニメーションを作ったときの要点メモ。Photoshopのどのような機能を使ったかや注意すべきポイントに絞って記載。 (ドローン画像の作り方や飛んでいるよう …

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

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

GulpでWordPressのCI 〜設計編〜

WordPressのテーマファイルをローカルで開発してgithubにpush、そのままサーバーまでデプロイするCIを実現しようと考えています。自分の環境とか踏まえてまずはどうやって実現するか設計しまし …

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

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

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

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

sidebartop_Ad