BLOG ブログ

ホームページ制作
BLOG
HTMLで背景に斜め線を引く様々な方法（CSS、SVG、canvas）

HTMLで背景に斜め線を引く様々な方法（CSS、SVG、canvas）

更新日：2020/07/02

近年、背景に斜め線を使用しているサイトがしばしば見受けられますよね？
弊社の制作実績でも斜め線を使用したサイトをいくつか掲載しています。
株式会社オーカム：https://www.ocam.co.jp/

こういったコーディングを過去に経験している人なら分かると思いますが、ちょっとてこずってしまいガチですよね。
なので、これから初めて斜め線コーディングをする方やより効率的な方法を知りたい方のために3つの方法をシェアしたいと思います。

下記が今回紹介する3つの実装例のデモページになります。

demo

要素全体を傾ける方法
SVGを使う方法
【おまけ】canvasで動かせる三角形を配置する方法

01.要素全体を傾ける方法

要素全体を傾け、中の要素を相殺させることにより背景のみを傾けることが出来ます。

まず親要素に対して、要素自体を傾ける下記のスタイルを当てます。
transform: skewY(-〇〇deg);
このままだと中の要素にまで効いてしまうので、相殺させます。
transform: skewY(〇〇deg);
すると、親要素だけが傾き背景に斜め線を引くことが出来ます。

demo

[HTML]

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

<p>要素全体を傾ける方法</p>

</div>

[CSS]

.triangle01 {
  display: table;
  width: 100%;
  height: 500px;
  background-color: #e8a337;
  transform: skewY(-10deg);
  margin-top: 10vw;
}

.triangle01 p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 50px;
  font-weight: bold;
  color: #fff;
}

.triangle01 > * {
  transform: skewY(10deg);
}

.triangle01 {

display: table;

width: 100%;

height: 500px;

background-color: #e8a337;

transform: skewY(-10deg);

margin-top: 10vw;

}

.triangle01 p {

display: table-cell;

vertical-align: middle;

text-align: center;

font-size: 50px;

font-weight: bold;

color: #fff;

}

.triangle01 > * {

transform: skewY(10deg);

}

実際に使ってみた感想

画像を用意する必要がなく、角度・色味調整などCSSを書き換えるだけで変更できるので扱いやすいです。

02.SVGを使う方法

疑似要素にsvgを背景で指定し、背景に斜め線を引きます。
注意点が1つありまして、横幅によっては疑似要素との間に余白が空いてしまう事があるので1px分引きます。

demo

[HTML]

<div class="triangle02">
  <p>SVGを使う方法</p>
</div>

<p>SVGを使う方法</p>

</div>

[CSS]

.triangle02 {
  position: relative;
  display: table;
  width: 100%;
  height: 300px;
  background-color: #c2e035;
  margin-top: 20vw;
}

.triangle02 p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 50px;
  font-weight: bold;
  color: #fff;
}

.triangle02:before,
.triangle02:after {
  content: "";
  display: block;
  height: 18vw;
  position: absolute;
  right: 0;
  left: 0;
  background-image: url(../img/triangle.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

.triangle02:before {
  bottom: calc(100% - 1px);
}

.triangle02:after {
  top: calc(100% - 1px);
  transform: rotate(180deg);
}

.triangle02 {

position: relative;

display: table;

width: 100%;

height: 300px;

background-color: #c2e035;

margin-top: 20vw;

}

.triangle02 p {

display: table-cell;

vertical-align: middle;

text-align: center;

font-size: 50px;

font-weight: bold;

color: #fff;

}

.triangle02:before,

.triangle02:after {

content: "";

display: block;

height: 18vw;

position: absolute;

right: 0;

left: 0;

background-image: url(../img/triangle.svg);

background-repeat: no-repeat;

background-size: cover;

}

.triangle02:before {

bottom: calc(100% - 1px);

}

.triangle02:after {

top: calc(100% - 1px);

transform: rotate(180deg);

}

実際に使ってみた感想

デモのように疑似要素で個別にSVGを配置することで、例えば上下でそれぞれ角度を変えたいときなどに便利です。

【おまけ】canvasで動かせる三角形を配置する方法

canvasを使用すると背景の斜め線をアニメーションさせることができます。
応用次第で、見せ方の幅が色々と広がりそうですね。

demo

[HTML]

<div class="triangle02">
  <p>canvasで動かせる三角形を配置する方法</p>
</div>

<p>canvasで動かせる三角形を配置する方法</p>

</div>

[CSS]

.triangle04 {
  position: relative;
  display: table;
  width: 100%;
  height: 300px;
  background-color: #d841ba;
  margin: 40vw 0;
}

.triangle04 p {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 50px;
  font-weight: bold;
  color: #fff;
}

canvas {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 18vw;
}

#canvas01 {
  bottom: 100%;
}

#canvas02 {
  top: 100%;
  transform: rotate(180deg);
}

.triangle04 {

position: relative;

display: table;

width: 100%;

height: 300px;

background-color: #d841ba;

margin: 40vw 0;

}

.triangle04 p {

display: table-cell;

vertical-align: middle;

text-align: center;

font-size: 50px;

font-weight: bold;

color: #fff;

}

canvas {

position: absolute;

left: 0;

right: 0;

width: 100%;

height: 18vw;

}

#canvas01 {

bottom: 100%;

}

#canvas02 {

top: 100%;

transform: rotate(180deg);

}

[JS]

// canvas01
  function canvas01() {
    var c = document.getElementById('canvas01');
    var ctx = c.getContext('2d');
    var w = c.clientWidth;
    var h = c.clientHeight;
    var i = 0;

    c.width = w;
    c.height = h;

    ctx.beginPath();
    ctx.moveTo(w, h);
    ctx.lineTo(0, 0);
    ctx.lineTo(0, h);
    ctx.closePath();
    ctx.fill();
    ctx.fillStyle = "#d841ba";

    var timer = setInterval(function () {
      i++;
      if (i == w) {
        clearInterval(timer);
      }
      ctx.clearRect(0, 0, w, h);
      ctx.beginPath();
      ctx.moveTo(w, h);
      ctx.lineTo(i, 0);
      ctx.lineTo(0, h);
      ctx.closePath();
      ctx.fill();
    }, 1);
  }
  canvas01();

  // canvas02
  function canvas02() {
    var c = document.getElementById('canvas02');
    var ctx = c.getContext('2d');
    var w = c.clientWidth;
    var h = c.clientHeight;
    var i = 0;

    c.width = w;
    c.height = h;

    ctx.beginPath();
    ctx.moveTo(w, h);
    ctx.lineTo(0, 0);
    ctx.lineTo(0, h);
    ctx.closePath();
    ctx.fill();
    ctx.fillStyle = "#d841ba";

    var timer = setInterval(function () {
      i++;
      if (i == w) {
        clearInterval(timer);
      }
      ctx.clearRect(0, 0, w, h);
      ctx.beginPath();
      ctx.moveTo(w, h);
      ctx.lineTo(i, 0);
      ctx.lineTo(0, h);
      ctx.closePath();
      ctx.fill();
    }, 1);
  }
  canvas02();

// canvas01

function canvas01() {

var c = document.getElementById('canvas01');

var ctx = c.getContext('2d');

var w = c.clientWidth;

var h = c.clientHeight;

var i = 0;

c.width = w;

c.height = h;

ctx.beginPath();

ctx.moveTo(w, h);

ctx.lineTo(0, 0);

ctx.lineTo(0, h);

ctx.closePath();

ctx.fill();

ctx.fillStyle = "#d841ba";

var timer = setInterval(function () {

i++;

if (i == w) {

clearInterval(timer);

}

ctx.clearRect(0, 0, w, h);

ctx.beginPath();

ctx.moveTo(w, h);

ctx.lineTo(i, 0);

ctx.lineTo(0, h);

ctx.closePath();

ctx.fill();

}, 1);

}

canvas01();

// canvas02

function canvas02() {

var c = document.getElementById('canvas02');

var ctx = c.getContext('2d');

var w = c.clientWidth;

var h = c.clientHeight;

var i = 0;

c.width = w;

c.height = h;

ctx.beginPath();

ctx.moveTo(w, h);

ctx.lineTo(0, 0);

ctx.lineTo(0, h);

ctx.closePath();

ctx.fill();

ctx.fillStyle = "#d841ba";

var timer = setInterval(function () {

i++;

if (i == w) {

clearInterval(timer);

}

ctx.clearRect(0, 0, w, h);

ctx.beginPath();

ctx.moveTo(w, h);

ctx.lineTo(i, 0);

ctx.lineTo(0, h);

ctx.closePath();

ctx.fill();

}, 1);

}

canvas02();

まとめ

このような小技を沢山ストックさせておくと、いざという時に役に立ちそうですね。
今回は背景に斜め線を引く方法で紹介しましたが、他の場所でも応用すると幅は広がりそうです。

JavaScript WEB サイト制作

一覧へ戻る

BLOG ブログ

HTMLで背景に斜め線を引く様々な方法（CSS、SVG、canvas）

01.要素全体を傾ける方法

実際に使ってみた感想

02.SVGを使う方法

実際に使ってみた感想

【おまけ】canvasで動かせる三角形を配置する方法

まとめ

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ

BLOG ブログ

HTMLで背景に斜め線を引く様々な方法（CSS、SVG、canvas）

01.要素全体を傾ける方法

実際に使ってみた感想

02.SVGを使う方法

実際に使ってみた感想

【おまけ】canvasで動かせる三角形を配置する方法

まとめ

FOLLOW US 最新の情報をお届けします

関連記事

先輩社員の声 VOICES

CONTACT お問い合わせ