T47 PEST CONTROL

How It Works:

This 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;
  right: 0; /* Positioned on the right side */
  height: 100%;
  width: 20%; /* Width of the cut area */
  background-color: white;
  transform: skewX(-20deg); /* Creates the slant effect */
  transform-origin: top right; /* 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
• The white slanting element is positioned absolutely on the right 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