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

发布于 2025-01-17 19:07:49 字数 1413 浏览 1 评论 0原文

我正在尝试创建带有背景图像的横幅,在三角形的边框后面:

“在此处输入图像描述”

我尝试在:之前和:之后使用pseudo选择器上使用边框,但我无法实现上述内容,尤其是当涉及响应能力时。

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

任何帮助将不胜感激。谢谢

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

enter image description here

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

疯到世界奔溃 2025-01-24 19:07:49

正如您所写的,欢迎任何想法和任何帮助,我有一个想法给您。
我找到了一个可以帮助你的网站: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>

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>

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文