如何使用html＆amp; amp; CSS

Question

我正在使用html，css和bootstrap。

我有2个水平div：

<style>
  .panel1 {
   background-image: url("panel1.png");
   background-position: right bottom;
   background-repeat: no-repeat;
   background-size: cover;
  }

 .panel2 {
   background-image: url("panel2.jpg");
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
 }
</style>

<div class="container-fluid panel1">
  ...div content...
</div>



<div class="container-fluid panel2">
  ...div content...
</div>

他们每人都有背景图片，我希望他们以三角形的方式见面，如this site

Answer 1

在图像下方使用两个div，如下所示，

<div class="container-fluid">
  ...div content...
</div>

<div class="leftBorder"></div>
<div class="rightBorder"></div>

及其CSS，

.leftBorder {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 5.1vw 50vw;
    border-color: transparent transparent #000 transparent;
    z-index: 499;
}
.rightBorder {
    position: absolute;
    left: 49.9vw;
    bottom: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5.1vw 0 0 50.1vw;
    border-color: transparent transparent transparent #000;
    z-index: 499;
}

这应该有用。