如何在带背景的横幅上实现三角形叠加？

Question

我正在尝试创建一个带背景图像的横幅，位于三角形边框后面：

我已经尝试在 :before 和 :after 伪选择器上使用边框，但我无法实现上述目标，尤其是在响应方面。

<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);
    }

如有任何帮助，我们将不胜感激。谢谢

Answer 1

正如您所写，欢迎任何想法和帮助，我有一个想法可以提供给您。我找到了一个可以帮助你的网站：bennettfeely，这里你可以创建不同的形状，所以我给你做了一个例子。

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>

如何在带背景的横幅上实现三角形叠加？

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

html

css

border

styling

triangle