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

はじめに

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

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 100%です。学習者から 100% の好評価を得ています。

形状区切り線

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 でさらに多くの実験を行って練習してください。

CSS を使った形状区切り線の作成

はじめに

形状区切り線

まとめ