How to Create a CSS3 Wave Shape with a Border?

CSS3 Wave Shape with Border

In this query, the user desires to create a wave shape with a border using CSS3. Despite attempting to use CSS3 Shapes, they encountered difficulties.

To address this, CSS3 Shapes may not be the most suitable solution, as it is not designed to create borders. Instead, a more effective approach is to use SVG (Scalable Vector Graphics).

Solution using SVG:

Replace the ".panel" div element with an SVG element. Use the "path" element to define the shape of the wave. Specify the "fill" attribute to set the background color and the "stroke" attribute to create the border. Float the SVG element to the right to align it accordingly.

Here's an example HTML and CSS code:

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

This approach allows you to control the fill color and border independently, resulting in the desired wave shape with a border.

The above is the detailed content of How to Create a CSS3 Wave Shape with a Border?. For more information, please follow other related articles on the PHP Chinese website!