如何使用引导程序将颜色放在底部的 div 上？答案

【问题标题】：how to put color to div on bottom using bootstrap?如何使用引导程序将颜色放在底部的 div 上？
【发布时间】：2020-07-21 04:51:00
【问题描述】：

如图所示，div有深蓝色的倾斜，如何在asp.net核心项目中使用bootstrap呢？

【问题讨论】：

你可以自己使用 CSS 吗？
是的，这样的颜色怎么能斜放在底部

标签： html bootstrap-4 asp.net-core-mvc

【解决方案1】：

您不能使用引导程序。但是我使用CSS Path 来创建相同的形状

你可以使用这个website来制作CSS路径

.backgroundCover {
  height: 200px;
  width: 200px;
  background: blue;
  border:1px solid black;
}
#clipPath {
  height: 200px;
  width: 200px;
  background: white;
  clip-path: polygon(0 0, 100% 0, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

<div class="backgroundCover">
  <div id="clipPath">
  </div>
</div>

【讨论】：

@teju 如果能解决您的问题，请点赞并接受我的回答

【解决方案2】：

您还可以使用:after 和:before 伪元素创建矩形，然后旋转它们。在旧浏览器上使用transform而不是clip-path，支持率更高。

body { background: black; }

.container {
  width: 200px;
  height: 260px;
  
  background: white;
  
  overflow: hidden;
  
  position: relative;
}

.container:before,
.container:after {
  content: '';
  
  width: 50%;
  height: 50%;
  
  position: absolute;
  
  background: #0d2e41;
  
  bottom: -25%;
}

.container:before {
  transform: rotateZ(135deg);
  
  left: -25%;
}

.container:after {
  transform: rotateZ(225deg);
  
  right: -25%;
}

<div class="container">

</div>

【讨论】：