CSS を使用して不規則な境界線を作成するいくつかの方法を検討する

CSS 不規則境界線

Web デザインの継続的な進歩と革新により、通常の四角形や円形の境界線では Web デザインのニーズを満たせなくなる場合があります。 CSS の発展により不規則な境界線が可能になり、現代の Web デザインで使用されることが増えています。この記事では、CSS を使用して不規則な境界線を作成するいくつかの方法を検討します。

1. クリップパスを使用する

クリップパスは、固定サイズの画像または要素をクリップするために使用される CSS プロパティです。これにより、開発者はクリッピング パスを指定して、パス内のオブジェクトの部分のみが表示されるようにすることができます。したがって、要素にクリッピング パスを適用することで、不規則な形状を作成できます。

クリップ パスを使用して不規則な境界線を作成するサンプル コードは次のとおりです。

.clip-path-example {
  background-color: #333333;
  clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
}

上記のスタイルは、要素の形状を不規則な多角形に変更するクリッピング パスを作成します。これにより、珍しい境界線の形状が作成されます (図 1 を参照)。

図 1. クリップパスを使用して作成された不規則な境界線

2. 疑似要素を使用する(疑似要素)

別の A不規則な境界線を作成する一般的な方法は、擬似要素を使用して境界線をシミュレートすることです。疑似要素のプロパティを利用して、要素の境界の外側に疑似要素を配置し、CSS スタイルを使用して目的の境界線の形状を作成できます。

疑似要素を使用して不規則な境界線を作成するサンプル コードは次のとおりです。

.pseudo-element-example {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #333333;
  overflow: hidden;
}
.pseudo-element-example::before {
  content: '';
  position: absolute;
  top: -15px;
  left: -15px;
  width: 230px;
  height: 230px;
  background-color: #ffffff;
  border-radius: 50%;
}

上記のスタイルでは、要素の外側に吊り下げられた疑似要素が作成され、丸くて白に設定されます。 , オーバーフロー属性を使用すると、トリミングされた部分が非表示になり、異常な境界線の形状が作成されます (図 2 を参照)。

図 2. 疑似要素を使用して作成された不規則な境界線

3. SVG パス (SVG パス) を使用します。

SVG (スケーラブル ベクター グラフィックス) ) は、ほぼあらゆる形状のグラフィックを作成できるベクター グラフィック形式です。 SVG のパス要素を使用して、不規則な境界線の形状を作成し、それを要素に適用できます。

SVG パスを使用して不規則な境界線を作成するサンプル コードは次のとおりです。

.svg-path-example {
  background-color: #333333;
  mask-image: url('data:image/svg+xml;utf8,<svg><path></path></svg>');
}

上記のスタイルは、マスク画像テクノロジを使用して、不規則な形状を定義する SVG パス要素を作成します。これを要素に適用すると、珍しい境界線の形状が作成されます (図 3 を参照)。

図 3. SVG パスを使用して作成された不規則な境界線

結論

この記事では、CSS メソッドを使用して次のことを行う 3 つの方法について説明しました。不規則な境界線を作成します: クリップパス、疑似要素、SVG パス。これらの方法にはそれぞれ長所と短所があり、さまざまなテクニックやツールを使用すると、より創造的で複雑なデザインを実現できます。どちらの方法を使用する場合でも、ブラウザーの互換性とパフォーマンスの問題を考慮し、ページがすべてのデバイスで適切に表示されることを確認してください。

以上がCSS を使用して不規則な境界線を作成するいくつかの方法を検討するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。