@charset "UTF-8";
/* CSS Document */

nav-before-after {
          position: relative; /* Needed for clip-path */
          overflow: hidden; /* Hide any overflow */
        }

        .nav-before-after div {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background-color: #f0f0f0; /* Example background color */
        }

        .nav-before-after:first-child div {
          clip-path: polygon(0% 50%, 80% 50%, 100% 100%, 0% 100%, 0% 60%); /* Example shape */
        }

        .nav-before-after:last-child div {
          clip-path: polygon(0% 100%, 20% 50%, 100% 50%, 100% 100%, 0% 100%); /* Example shape */
        }

.house-shape {
  width: 200px; /* Adjust as needed */
  height: 200px; /* Adjust as needed */
  background-color: lightblue; /* Or an image */
  clip-path: polygon(
    50% 0%,    /* Top point of the roof */
    100% 25%,   /* Top right corner of the roof */
    100% 100%,  /* Bottom right corner of the house */
    0% 100%,    /* Bottom left corner of the house */
    0% 25%      /* Top left corner of the roof */
  );
}