T47 PEST CONTROL

How It Works:

This left-side slanting cut is created using a combination of transform: skewX() and positioning:

1. The Container:

.topBar {
  position: relative;
  background-color: #d81921; /* Red color */
  height: 40px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  overflow: hidden;
}

2. The Slanting Cut Element:

.slantingCut {
  position: absolute;
  top: 0;
  left: 0; /* Positioned on the left side */
  height: 100%;
  width: 20%; /* Width of the cut area */
  background-color: white;
  transform: skewX(20deg); /* Creates the slant effect (positive angle) */
  transform-origin: top left; /* Pivot point for the transform */
  z-index: 1;
}

3. The Content Elements:

.leftContent, .rightContent {
  position: relative;
  z-index: 10; /* Above the slanting cut */
}

Key Points:

• The skewX(20deg) creates the slanting effect (positive angle for left side)
• The white slanting element is positioned absolutely on the left side
• Content needs a higher z-index to appear above the slanting cut
• The container needs overflow: hidden to prevent the skewed element from extending outside
• Adjust the width and skew angle to control the appearance of the slant

Difference Between Left and Right Slant:

• For left side: left: 0 and skewX(positive angle)
• For right side: right: 0 and skewX(negative angle)
• Transform origin should match the side (left or right)