如何在不使用“多边形”的情况下获得三角形布局

【问题标题】：How to get triangle layout without using "polygon"如何在不使用“多边形”的情况下获得三角形布局
【发布时间】：2018-06-08 22:04:32
【问题描述】：

如何在不使用“多边形”的情况下仅在容器内获得“任务”部分的三角形布局。我不想让它流出容器。

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3 bootstrap-4

【解决方案1】：

您可以使用 css 的 border 属性制作三角形。

查看此链接了解更多形状：https://css-tricks.com/examples/ShapesOfCSS/

.container {
  position: relative;
}
.mission {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 0px solid transparent;
  border-right: 100px solid transparent;
  border-top: 150px solid red;
  border-bottom: 0px solid transparent;
}

.mission + div {
  position: absolute;
}

.content {
  position: absolute;
  width: 350px;
  height: 200px;
  background: lightgrey;
  padding-left: 100px;
}

<div class="container">
  <div class="content">
    Content
  </div>
  <div class="mission">
  </div>
  <div>
    Mission
  </div>
</div>

【讨论】：