視覚的に魅力的な形状区切り線を作成 | CSS デザイン

はじめに

この実験では、CSSを使って形状区切り線を作成する方法を探ります。区切り線は、SVG形状を使って2つの異なるブロックを視覚的に区切ります。::after疑似要素を使って親要素の背景色を設定することで、区切り線を簡単にカスタマイズしてWebページの全体的なデザインに合わせることができます。この実験では、CSSを使って視覚的に魅力的で機能的な区切り線を作成する実践的な経験を提供します。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/BasicStylingGroup(["Basic Styling"]) css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/BasicStylingGroup -.-> css/colors("Colors") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/positioning("Positioning") css/IntermediateStylingGroup -.-> css/backgrounds("Backgrounds") css/IntermediateStylingGroup -.-> css/pseudo_elements("Pseudo-elements") subgraph Lab Skills css/selectors -.-> lab-35238{{"CSS を使った形状区切り線の作成"}} css/colors -.-> lab-35238{{"CSS を使った形状区切り線の作成"}} css/width_and_height -.-> lab-35238{{"CSS を使った形状区切り線の作成"}} css/positioning -.-> lab-35238{{"CSS を使った形状区切り線の作成"}} css/backgrounds -.-> lab-35238{{"CSS を使った形状区切り線の作成"}} css/pseudo_elements -.-> lab-35238{{"CSS を使った形状区切り線の作成"}} end

形状区切り線

VM内には既にindex.htmlとstyle.cssが用意されています。

SVG形状を使って2つの異なるブロック間に区切り線要素を作成するには、次の手順に従います。

::after疑似要素を使用します。
background-imageプロパティを使ってデータURIを通じてSVG形状（24x12の三角形）を追加します。背景画像はデフォルトで繰り返され、疑似要素の全域を覆います。
親要素のbackgroundプロパティを使って区切り線に望ましい色を設定します。

次のHTMLコードを使用します。

<div class="shape-separator"></div>

そして次のCSSルールを適用します。

.shape-separator {
  position: relative;
  height: 48px;
  background: #9c27b0;
}

.shape-separator::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12'%3E%3Cpath d='m12 0l12 12h-24z' fill='transparent'/%3E%3C/svg%3E");
  position: absolute;
  width: 100%;
  height: 12px;
  bottom: 0;
}

右下隅の「Go Live」をクリックして、ポート8080でWebサービスを実行してください。その後、Web 8080タブを更新してWebページをプレビューできます。

まとめ

おめでとうございます！形状区切り線の実験を完了しました。技術力を向上させるために、LabExでさらに多くの実験を行って練習してください。