SVGとCSSを使用してボーダー付きの波形を作成するにはどうすればよいですか?

CSS3 で境界線のある波形を作成する

CSS3 で境界線のある波形をデザインするのは難しい場合があります。 CSS3 シェイプを使用して実装すると、望ましい結果が得られない可能性があります。代わりに、SVG と CSS の配置を組み合わせることで、目的の効果を得ることができます。

波形に SVG を使用する

波形に div 要素を使用する代わりに、 SVG要素を使用できます。 SVG 内のパス要素を使用して、波の形状を定義できます。 fill 属性を白に設定すると、波形に単色を与えることができます。

波形への境界線の追加

境界線を作成するには、別のパス要素を使用します。 SVGに追加できます。このパスは波形と同じ形状である必要がありますが、わずかに小さい必要があります。 fill 属性は none に設定し、ストローク属性とストローク幅属性を使用して境界線を定義する必要があります。

波形の配置

SVG 要素CSSを使用して配置できます。 float プロパティを使用すると、SVG をコンテンツの右側にフローティングできます。 margin-top プロパティを使用して、SVG をコンテンツの少し上に配置できます。

最終コード

次のコードは、境界線のある波形の実装を示しています。 SVG と CSS を使用する:

<div class="container">
  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates nam fuga eligendi ipsum sed ducimus quia adipisci unde atque enim quasi quidem perspiciatis totam soluta tempora hic voluptatem optio perferendis.</p>
  </div>
</div>
<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>

body {
  background: #007FC1;
}
.container {
  border-bottom: 4px solid #B4CAD8;
}
.container {
  background-color: #fff;
  z-index: -1;
}
.container > .text {
  padding: 0.5em;
}
.panel {
  position: relative;
  float: right;
  margin-top: -4px;
}

このアプローチでは、SVG を使用してカスタム波形を作成し、追加のパス要素を使用して、その上に境界線を重ねます。 CSS を使用して波形を配置すると、目的の結果が完成します。

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