How to implement a triangle overlay on a banner with background?

Question

I am trying to create a banner with a background image, behind a triangle shaped border:

I have tried using borders on both the :before and :after pseudo selectors, but I cannot achieve the above, especially when it comes to responsiveness.

<div class="contact-banner banner">
    <img src="background.jpg" />
    <div class="contact-banner-inner bg-light">
        <div class="container">
            <div class="content-inner">
                <!-- Content will go here -->
            </div>
        </div>
    </div>
</div>

    .contact-banner-inner:before {
        content: '';
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 40vh 40vh 0;
        border-color: transparent #f7f7f7 transparent transparent;
        left: 7%;
        top: 0;
        position: absolute;
        z-index: 3;
    }

    .contact-banner-inner:after {
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 40vh 40vh 0;
        border-color: transparent #f7f7f7 transparent transparent;
        left: 7%;
        bottom: 0;
        position: absolute;
        z-index: 3;
        transform: rotate(90deg);
    }

Any help would be greatly appreciated. Thanks

Answer 1

As you wrote that any idea and any help is welcome I have an idea for you. I found a site that can help you: bennettfeely, Here you can create different shapes, so I made an example for you.

body {
  margin: 0;
}
.container {
  background: #3c1919;
}
.background {
  width: 30%;
  height: 500px;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAA1BMVEUAXEdZzPuxAAAASElEQVR4nO3BgQAAAADDoPlTX+AIVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADwDcaiAAFXD1ujAAAAAElFTkSuQmCC");
  clip-path: polygon(50% 0%, 100% 52%, 48% 100%, 0 100%, 0 0);
}

<div class="container">
  <div class="background"></div>
</div>