実習範囲04:結果セクションとCTA | SkillhubAI(スキルハブエーアイ)

実習範囲04:結果セクションとCTA

実習の範囲

下記スクリーンショットの範囲をコーディングしてください。

【結果セクション】
file

【CTA】
file

コーディングのヒント

黄色い下向き三角形(背景)

表示領域全体を使って三角形を作る場合は、値に使う単位に「vw」を使うと楽です。
vwはviewport width、ビューポートの幅(表示されている幅)に対する割合を指定できる単位です。

下向きの三角は、以下のような方法で作作成可能です。
次レッスンの解説では、疑似要素を使用した作り方を解説します。

  • 疑似要素(::after)を使用して、下向きの三角形を加える
  • clip-path: polygon() で下向き五角形のクリッピング領域を作る

マーカー風の文字装飾

見出しの文字に使われている、マーカーをひいたような下線。
文字に少し重なっている表示は、backgroundの値にlinear-gradient ()関数を使うと1つのスタイル指定だけで作ることができます。