html - 如何从主要内容制作带有背景的三 Angular 形

Question

目前我的盒子看起来像这样:

我怎样才能让任何盒子里的背景图片影响到三 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>

希望能帮到你

Answer 1

你可以尝试使用 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>