CSSで再現するグラデーションについて

こんにちは！
Webエンジニアのちょっくんです！

今回は、最近の実装で使ったCSSグラデーションについて書いてみたいと思います。

さて、グラデーションはCSSのlinear-gradient()関数で表現できますよね。
以前までは必要だったベンダープレフィックスもブラウザの最新バージョンであれば、不要となっていてコーディングが楽になったイメージです。
ただ、デザインによっては、そのグラデーションをしっかりと再現するのに一手間かける必要があったりします。

それでは、デザイナーさんから頂いたデザインの中からグラデーション三人衆をご紹介します。

①ボーダー（ボックスの線にグラデーション）

まずは、1人目。ボーダーさんです。
こいつは、三人衆の中でも最弱でした。

//HTML
<div class="borderBox"></div>

//CSS
.borderBox {
  width: 580px;
  height: 130px;
  border: 10px solid;
  background: linear-gradient(to right, #000C1A, #004A99);
  border-image: linear-gradient(to left, #FFDE2B, #A86F00);
  border-image-slice: 1;
}

こんな感じですかね。
現状のborder-image-sliceの対応状況であれば、問題なく使えます。
ちょっとオシャレな線にしたい時などにも使えたりします。

②トライアングル（ボックスの端の三角形にグラデーション）

2人目は、トライアングルさんです。
三人衆の中では、こいつが一番厄介でした...！
三角形にグラデーションはちょっと考えなければなりません...!

//HTML
<div class="box"></div>

//CSS
.box {
  width: 225px;
  height: 80px;
  position: relative;
  left: 50px;
  overflow: hidden;
  background: linear-gradient(to right, #000C1A, #004A99);
}

.box::before {
  content: '';
  width: 120px;
  height: 120px;
  position: absolute;
  top: -60px;
  left: -60px;
  background: linear-gradient(to bottom right, #ffde2b 50%, #a86f00);
  transform: scaleX(0.3) rotate(45deg);
}

こんな感じでしょうか。
ポイントとしては、三角形を表現するためにtransform()関数で45度回転させているため、それを考慮してグラデーションをかける必要があります。
デザインの画像では上から下にグラデーションがかかっていますが、実際にはbefore要素を回転させているため、CSS上では斜めにグラデーションをかけないとデザイン通りにはならず、デザイナーさんの目を掻い潜ることはできません。

ちなみに、before要素のheightを100%にするなどして、三角形をボックスの高さに合わせて可変にすることができます。
ただ、その場合はグラデーションのかかり具合を考慮しなければならないため、before要素ではなく何かしらの空要素を用意してJSで動的に変えていく必要があります。ぜひ、やってみてください！

③ビッグトライアングル（セクションの境目の三角形にグラデーション）

三人衆の中で一番大きいビッグトライアングルさんです。
「手強そう...！」という第一印象を持つ人もいるかもしれませんが、ラスボスが意外と呆気ないのは世の常でしょうか。

//HTML
<div class="wrap">
  <div class="white"></div>
  <div class="gradation"></div>
  <div class="navy"></div>
</div>

//CSS
.wrap {
  overflow: hidden;
}

.gradation {
  width: 100%;
  height: 60px;
  position: relative;
  background: radial-gradient(#ffde2b,#a86f00);
}

.gradation::before {
  content: '';
  margin-left: -900px;
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 30px 900px 0 900px;
  border-color: #FFF transparent transparent transparent;
}

.gradation::after {
  content: '';
  margin-left: -900px;
  position: absolute;
  bottom: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 900px 30px 900px;
  border-color: transparent transparent #004A99 transparent;
}

.white {
  width: 100%;
  height: 100px;
}

.navy {
  width: 100%;
  height: 100px;
  background: linear-gradient(to top, #000C1A, #004A99);
}

三角形にグラデーションをかけるのではなく、ボックスにグラデーションをかけます。
そして、コーダーの心強い味方であるbeforeさんとafterさんのお二人の力を借りて再現してます。ナイス援護です。
「必ずしも真っ向勝負しなくてもいい。」
そんな時もありますよね。

グラデーションについては以上になります！
今回は実装した範囲内におけるグラデーションについて書きました。
考えることは多くなりますが、CSSで表現できる幅が増えているのはとてもいいですね！
一緒に頑張っていきましょう！