境界線のある CSS3 波形を作成するには?-CSSチュートリアル-php.cn

境界線のある CSS3 波形を作成するには?

Susan Sarandon

リリース： 2024-11-17 13:49:02

オリジナル

259 人が閲覧しました

How to Create a CSS3 Wave Shape with a Border?

ボーダー付き CSS3 波形

このクエリでは、ユーザーは CSS3 を使用してボーダー付きの波形を作成したいと考えています。 CSS3 シェイプを使用しようとしたにもかかわらず、問題が発生しました。

これに対処するには、CSS3 シェイプは境界線を作成するように設計されていないため、最適なソリューションではない可能性があります。代わりに、より効果的なアプローチは、SVG (Scalable Vector Graphics) を使用することです。

SVG を使用した解決策:

「.panel」 div 要素を SVG 要素に置き換えます。。「path」要素を使用して波の形状を定義します。「fill」属性を指定して背景色を設定し、「ストローク」属性を指定して枠線を作成します。 SVG 要素を右にフロートさせて、それに応じて配置します。

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

ログイン後にコピー

この方法では、塗りつぶしの色と境界線を個別に制御できるため、次のようになります。ボーダー付きの希望の波形。

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