目前我的盒子看起来像这样:
我怎样才能让任何盒子里的背景图片影响到三 Angular 形,所以它看起来像这样?
当我的代码看起来像这样的时候,我正在努力实现它。
.first,
.second,
.third {
position: relative;
display: block;
height: 100px;
padding: 20px;
}
.first {
background: red;
}
.first:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 0, 0, 0);
border-top-color: red;
border-width: 30px;
margin-left: -30px;
z-index: 2;
}
.second {
background-image: url(http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg);
background-size: cover;
background-repear: no-repeat;
}
.inner_second{
background: blue;
opacity; 0.8;
}
.second:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 255, 0);
border-top-color: blue;
border-width: 30px;
margin-left: -30px;
z-index: 2;
}
.third {
background: yellow;
}
<div class="first">
<div class="inner_first">
</div>
</div>
<div class="second">
<div class="inner_second">
</div>
</div>
<div class="third">
<div class="inner_third">
</div>
</div>
希望能帮到你
最佳答案
你可以尝试使用 2 个伪元素 before a after.. 小 hack
.first,
.second,
.third {
position: relative;
display: block;
height: 100px;
padding: 20px;
}
.first {
background: red;
}
.first:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 0, 0, 0);
border-top-color: red;
border-width: 30px;
margin-left: -30px;
z-index: 2;
}
.second {
background-image: url('http://az616578.vo.msecnd.net/files/2016/04/09/6359580807140768861266757027_Never-Study-Hard-The-Art-of-Studying-Smart.jpg');
background-size: cover;
background-repeat: no-repeat;
}
.inner_second{
background: blue;
opacity: 0.8;
}
.second::before {
top: calc(100% - (30px * 2));
left: 0;
border: solid transparent;
content: " ";
height: 0;
width: 50%;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 255, 0);
border-bottom-color: yellow;
border-width: 30px;
border-left-width: 0;
z-index: 2;
box-sizing: border-box;
}
.second::after {
top: calc(100% - (30px * 2));
right: 0;
border: solid transparent;
content: " ";
height: 0;
width: 50%;
position: absolute;
pointer-events: none;
border-color: rgba(0, 0, 255, 0);
border-bottom-color: yellow;
border-width: 30px;
border-right-width: 0;
z-index: 2;
box-sizing: border-box;
}
.third {
background: yellow;
}
<div class="first">
<div class="inner_first">
</div>
</div>
<div class="second">
<div class="inner_second">
</div>
</div>
<div class="third">
<div class="inner_third">
</div>
</div>
关于html - 如何从主要内容制作带有背景的三 Angular 形,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44108587/