CSS3 と SVG を使用して境界線のある波形を作成する方法

CSS3 でボーダー付きの波形を作成する

シェイプを使用して CSS3 で波形をデザインしようとすると、期待どおりの結果が得られない場合があります。境界線と背景色の設定に制限があるため、これは達成できません。これを解決するには、波形の div の代わりに SVG を使用することを検討してください。

実装:

まず、下枠のあるコンテナ div を作成します。コンテナ内に、コンテンツと波形の SVG を配置します。 SVG を右にフローティングします。

SVG デザイン:

パスを使用して波形を作成し、形状を定義し、白で塗りつぶします。次に、少しオフセットして別のパスを作成し、ストローク プロパティを使用して境界線を定義し、塗りつぶしを透明に設定します。

最終実行:

SVG は、コンテナをわずかに傾けて、境界線のある波形の錯覚を作成します。目的のデザインに合わせて、必要に応じて SVG の寸法と位置を調整します。

コード例:

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

<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>

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