How to create a wave shape with a border using SVG and CSS?

Creating Wave Shapes with Borders in CSS3

Designing wave shapes with borders in CSS3 can be challenging. Implementing them using CSS3 Shapes may not yield the desired results. Instead, a combination of SVG and CSS positioning can achieve the desired effect.

Using SVG for the Wave Shape

Instead of using a div element for the wave shape, an SVG element can be used. The path element within the SVG can be used to define the shape of the wave. The fill attribute can be set to white to give the wave shape a solid color.

Adding a Border to the Wave Shape

To create the border, another path element can be added to the SVG. This path should have the same shape as the wave shape, but it should be slightly smaller. The fill attribute should be set to none, and the stroke and stroke-width attributes should be used to define the border.

Positioning the Wave Shape

The SVG element can be positioned using CSS. The float property can be used to float the SVG to the right of the content. The margin-top property can be used to position the SVG slightly above the content.

Final Code

The following code demonstrates the implementation of a wave shape with a border using SVG and 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;
}

This approach uses SVG to create a custom wave shape and then layers a border on top of it using an additional path element. Positioning the wave shape using CSS completes the desired result.

The above is the detailed content of How to create a wave shape with a border using SVG and CSS?. For more information, please follow other related articles on the PHP Chinese website!