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

Wave Shape with Border Using CSS3 and SVG

Implementing a wave shape with CSS3 can be challenging. While CSS3 shapes offer a wide range ofsmöglichkeiten, they fall short when it comes to applying borders and setting background colors on irregular shapes.

To achieve the desired "wave shape with border" effect, we can leverage the power of SVG (Scalable Vector Graphics). SVGs offer flexibility in defining complex shapes and can easily be styled with CSS.

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

Placing the SVG element next to the main content and aligning it to the right gives the illusion of a wave shape with a border:

.panel {
  position: relative;
  float: right;
  margin-top: -4px;
}

By setting the z-index of the container div to -1, we ensure that the SVG element remains above the content and creates the desired effect.

Thus, by combining the flexibility of SVGs with the styling capabilities of CSS, we can achieve the "wave shape with border" effect in CSS3.

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