In-depth Analysis and Implementation of Wave Shapes Using CSS Pseudo-elements

Geometric Foundations of Wave Shapes

Creating wave shapes in CSS requires a deep understanding of geometric principles. Waves are essentially graphics composed of continuous curve segments in two-dimensional space, which can be approximated through combinations of circles or ellipses.

From a mathematical perspective, a complete wave cycle can be constructed from two intersecting circles. When two circles of the same radius are arranged horizontally, their intersecting area forms a typical sine curve shape. By adjusting the relative positions and radii of the circles, wave amplitude and frequency can be controlled.

/* Basic circle combination model */
.circle-1 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #e0efe3;
  position: absolute;
  left: 0;
}

.circle-2 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #e0efe3;
  position: absolute;
  left: 50px;
}

CSS Pseudo-element Implementation Solution

Based on analysis of high-scoring Stack Overflow answers, using CSS pseudo-elements is an effective method for implementing wave shapes. This approach avoids additional HTML markup, maintaining code simplicity.

The core implementation relies on :before and :after pseudo-elements, creating arc effects through the border-radius property:

#wave {
  position: relative;
  height: 70px;
  width: 600px;
  background: #e0efe3;
}

#wave:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 340px;
  height: 80px;
  background-color: white;
  right: -5px;
  top: 40px;
}

#wave:after {
  content: "";
  display: block;
  position: absolute;
  border-radius: 100% 50%;
  width: 300px;
  height: 70px;
  background-color: #e0efe3;
  left: 0;
  top: 27px;
}

Parameter Adjustment and Customization

The appearance of wave shapes can be finely tuned through multiple CSS parameters:

• Width and Height: Control overall wave dimensions and amplitude
• border-radius Values: Determine the curvature degree of arcs
• Position Offsets: Adjust wave phase through top, left, right properties
• Color Configuration: Achieve different visual wave effects

In practical applications, dynamic adjustment can be achieved through CSS variables:

.wave-shape {
  --wave-height: 70px;
  --wave-width: 600px;
  --primary-color: #e0efe3;
  --secondary-color: white;
  --curve-radius: 100% 50%;
}

Comparative Analysis with SVG Solutions

While SVG provides more precise vector graphic control, CSS pseudo-element solutions offer significant advantages in certain scenarios:

Responsive Design Considerations

In real projects, wave shapes need to adapt to different screen sizes. By combining percentage units and media queries, responsive wave effects can be achieved:

@media (max-width: 768px) {
  #wave {
    width: 100%;
    height: 50px;
  }
  
  #wave:before {
    width: 60%;
    height: 60px;
  }
  
  #wave:after {
    width: 55%;
    height: 50px;
  }
}

Browser Compatibility and Performance Optimization

This solution has good compatibility in modern browsers, but may require prefix support in older versions:

• Full support in Chrome 4+, Firefox 3.5+, Safari 4+, Edge 12+
• Basic support in IE9 and above
• Excellent mobile browser compatibility

Performance optimization recommendations:

• Avoid overly complex border-radius calculations
• Use transform instead of top/left for animations
• Reasonably use will-change property to improve rendering performance

Practical Application Scenarios

Wave shapes have wide applications in web design:

• Page separators and visual guides
• Progress indicators and loading animations
• Background decorations and brand elements
• Data visualization and chart components

By combining multiple wave elements, more complex patterns and animation effects can be created, adding unique visual appeal to modern web interfaces.