How to Create a Wave Shape with a Border Using CSS3 and SVG?

Creating a Wave Shape with Border in CSS3

When attempting to design a wave shape with CSS3 using Shapes, the desired result may not be achievable due to the limitations of border and background color settings. To overcome this, consider using SVG instead of a div for the wave shape.

Implementation:

Begin by creating a container div with a bottom border. Within the container, place the content and the SVG for the wave shape. Float the SVG to the right.

SVG Design:

Craft the wave shape using paths to define the shape and fill it with white. Next, create another path, slightly offset, to define the border using the stroke property and setting the fill to transparent.

Final Execution:

The SVG will overlap the container slightly, creating the illusion of a bordered wave shape. Adjust the dimensions and position of the SVG as needed to match the desired design.

Example Code:

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>

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