'View background with Border with 4 cuff-off corner

I am trying to give a div 4 cutoff corners Like this

This is what I have done so far

But the problem with clip-path is that I can't get the background image present(in the body tag)enter image description here, I have to add the background image again in the innerWrap which does not look consistent.

is there any way to achieve the cut-off corner and without loosing the background image present in the body

.heroWrapper {
    display: flex;
    align-content: center;
    justify-content: center;
    padding: 0.06rem;

    height: 100%;
    background-color: v.$secondary;
    clip-path: polygon(
      0 0%,
      10% 0,
      90% 0,
      100% 10%,
      100% 90%,
      90% 100%,
      10% 100%,
      0% 90%,
      0% 10%
    );

    .heroInnerWrap {
      width: 100%;
      height: 100%;

      margin: auto;
      background: url("../bgImage.png");
      background-size: contain;
      clip-path: polygon(
        0 0%,
        10% 0,
        90% 0,
        100% 10%,
        100% 90%,
        90% 100%,
        10% 100%,
        0% 90%,
        0% 10%
      );

      .borders {
        position: absolute;
        width: 15rem;
        height: 15rem;
        background: v.$primary;
      }
    }

    .topright {
      top: 0rem;
      right: 0rem;
      transform: rotate(45deg);
    }
  }
css


Solution 1:[1]

Just create a type of hexagon and mask it with it.

.hexagon {
            top: 30vh;
            left: 40%;
            position: absolute;
            margin: 0 auto;
            background-color: blue;
            border-radius: 10px;
            width: 100px;
            height: 63px;
            box-sizing: border-box;
            transition: all 1s;
            border: 0.4vh solid transparent;
        }
        
        /* Creating pseudo-class */
        .hexagon:before, .hexagon:after {
            content: "";
            border: inherit;
            position: absolute;
            top: -0.5vh;
            left: -0.5vh;
            background-color: dodgerblue;
            border-radius: inherit;
            height: 100%;
            width: 100%;
        }
        
        /* Align them in such a way
        that they form a hexagon */
        .hexagon:before {
            transform: rotate(60deg);
        }
        .hexagon:after {
            transform: rotate(-60deg);
        }
<!DOCTYPE html>
<html>
    
<head>
    <title>
        Draw a Curved Edge
        Hexagon using CSS
    </title>

    <style>
        
    </style>
</head>

<body style="text-align: center;">
    
    
    <!-- Hexagon Division -->
    <div class="hexagon"
        id="hexagon">
    </div>
</body>

</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 ash

Related Questions