実習の範囲
下記スクリーンショットの範囲をコーディングしてください。
【結果セクション】
【CTA】
コーディングのヒント
黄色い下向き三角形(背景)
表示領域全体を使って三角形を作る場合は、値に使う単位に「vw」を使うと楽です。
vwはviewport width、ビューポートの幅(表示されている幅)に対する割合を指定できる単位です。
下向きの三角は、以下のような方法で作作成可能です。
次レッスンの解説では、疑似要素を使用した作り方を解説します。
- 疑似要素(
::after
)を使用して、下向きの三角形を加える clip-path: polygon()
で下向き五角形のクリッピング領域を作る
マーカー風の文字装飾
見出しの文字に使われている、マーカーをひいたような下線。
文字に少し重なっている表示は、backgroundの値にlinear-gradient ()関数
を使うと1つのスタイル指定だけで作ることができます。