如何在带背景的横幅上实现三角形叠加?
我正在尝试创建带有背景图像的横幅,在三角形的边框后面:
我尝试在:之前和:之后使用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:
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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
正如您所写的,欢迎任何想法和任何帮助,我有一个想法给您。
我找到了一个可以帮助你的网站:bennettfeely,在这里你可以创建不同的形状,所以我做了一个例子为你。
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.