如何使用 html 和 css 制作三角形 div 边框答案

【问题标题】：How to make triangle div border using html & css如何使用 html 和 css 制作三角形 div 边框
【发布时间】：2018-02-27 11:15:55
【问题描述】：

我正在使用 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那样以三角形方式见面

【问题讨论】：

什么是"angular div"？阅读How to Ask 并创建minimal reproducible example，没有 - 2 个 div 不是有效示例
这些是角度 div here。在这个网站上，他们有这些角度或三角形来划分页面内容。

标签： html css twitter-bootstrap

【解决方案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;
}

这应该可行。

【讨论】：