HTMLとCSSのコピペでできる斜めに傾けたブロックデザイン3種

2020年7月3日 3分

一昔前には、サイト内に画像で斜めの要素を作って表示させていましたが、その斜めのラインがガビガビだったりと、イマイチ斜めはWEBサイトと親和性が高くありませんでした。

近年は、この斜めの表現はCSSやSVG、そしてcanvasなどで簡単で綺麗に表現することができ、日常的に見るようになりました。

今回は、HTMLとCSSのコピペでできる斜めに傾けたブロックデザイン3種についてご紹介します。

斜めに傾けるCSSの基本
ベタ塗り
グラデーション
斜めのブロックにイラストを重ねる

斜めに傾けるCSSの基本

基本の考えは、CSSで要素全体を傾け、次にその中の要素を逆方向に傾けることにより、背景のみを傾ける表現です。

親要素に対して、要素自体を傾ける下記のスタイルを当てます。
transform: skewY(-〇〇deg);

中の要素にまで効いてしまうので、相殺させます。
transform: skewY(〇〇deg);

こうすることで、親要素だけが傾き、背景を斜めに傾けることができます。

ベタ塗り

ベタ塗りのブロックで、角度や・色味の調整はCSSを書き換えるだけで変更できるので汎用性の高いソースです。

斜めのブロック

コードを表示する

HTML

<div class="diagonal01">
  <p>要素全体を傾ける方法</p>
</div>

CSS

  /* 背景斜め1 */
.diagonal01 {
  display: table;
  width: 100%;
  height: 500px;
  background-color: #006897;
  transform: skewY(-10deg);
  margin-top: 10vw;
}

.diagonal01 p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 2.4em;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0.15em;
}

.diagonal01 > * {
  transform: skewY(10deg);  /* pの傾き角度 */
}

グラデーション

グラデーションをかけた斜めのブロックです。

斜めのブロック

ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

コードを表示する

HTML

<div class="diagonal02">
  <p class="title">要素全体を傾ける方法</p>
  <p>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</p>
</div>

CSS

  /* 背景斜め1 */
.diagonal02 {
  display: table;
  width: 100%;
  height: 300px;
	background: linear-gradient(-90deg, #cccccc, transparent);
  transform: skewY(-10deg);
  margin-top: 10vw;
}

.diagonal02 p {
  display: block;
  vertical-align: middle;
  text-align: center;
  font-size: 1.2em;
  margin: auto 2%;
  color: #111;
  letter-spacing: 0.15em;
}

.diagonal02 .title {
  font-size: 3.0em;
  margin: 1.5em auto 0.4em;
  font-weight: 500;
}

.diagonal02 > * {
  transform: skewY(10deg);  /* pの傾き角度 */
}

斜めのブロックにイラストを重ねる

::before の擬似要素を使って、右上部にSVGのイラストを表示させたデザインです。

サンプルのコードは、メディアクエリを書いていないのでサイトデザインに合わせて、ブレイクポイントの設定を行いましょう。

斜めのブロック

コードを表示する

HTML

<div class="diagonal03">
  <p><span>斜めのブロック</span></p>
</div>

CSS

  /* 背景斜め3 */
.diagonal03 {
  display: table;
  width: 100%;
  height: 300px;
  background-color: #c8e4ff;
  transform: skewY(-10deg);
  margin-top: 10vw;
  position: relative;
}

.diagonal03::before {
    content: "";
    width: 380px;
    height: 290px;
    background-image: url(https://dubdesign.net/wp-content/uploads/2020/07/iso_illust3.svg);
    background-repeat: no-repeat;
    position:absolute;
  transform: skewY(10deg);
    z-index: -5;
    right: -203px;
    top: -90px;
}

.diagonal03 p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 2.4em;
  font-weight: bold;
  color: #4f96f6;
  letter-spacing: 0.15em;
}

.diagonal03 p span {
  color: #364e96;/*文字色*/
  padding: 0.5em 1em;/*上下の余白*/
  border-top: solid 4px #364e96;/*上線*/
  border-bottom: solid 4px #364e96;/*下線*/
}

.diagonal03 > * {
  transform: skewY(10deg);  /* pの傾き角度 */
}