CSS3 と SVG を使用してボーダー付きの波形を作成する方法

CSS3 と SVG を使用したボーダー付きの波形

CSS3 を使用して波形を実装するのは難しい場合があります。 CSS3 シェイプは幅広い機能を提供しますが、不規則なシェイプに境界線を適用したり背景色を設定したりする場合には不十分です。

望ましい「境界線のある波形」効果を実現するには、次の機能を活用できます。 SVG (スケーラブル ベクター グラフィックス)。 SVG は複雑な形状を柔軟に定義でき、CSS で簡単にスタイル設定できます。

<svg class="panel" width="200" height="54">
  <path d="M0,0 h7 q9,3 12.5,10 l13,30 q3.2,10 13,10 h157 v-50z" fill="white" />
  <path transform="translate(0, -0.5)" d="M0,2 h7 q10,2 13,10 l13,30 q3,9 13,10 h157" fill="none" stroke="#B4CAD8" stroke-width="4" />
  <text x="110.5" y="25" text-anchor="middle">This is a panel</text>
</svg>

SVG 要素をメイン コンテンツの隣に配置し、右揃えにすると、境界線のある波形のような錯覚が得られます。

.panel {
  position: relative;
  float: right;
  margin-top: -4px;
}

コンテナ div の z-index を -1 に設定することで、SVG 要素がコンテンツの上に残り、望ましい効果が得られるようにします。

したがって、 SVG の柔軟性と CSS のスタイル機能を組み合わせることで、CSS3 で「境界線付きの波形」効果を実現できます。

以上がCSS3 と SVG を使用してボーダー付きの波形を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。