设计需要标题文本进入具有背景的boostrap响应列

Question

我正在使用矩形网格在boostrap 3响应网格上显示内容。

我需要文本在下面的模型中的橙色区域（它表示类别）：

这表示其他矩形网格中的一个矩形。

我还需要一个右下角（次要问题）。

我甚至不知道在谷歌搜索什么 - 我尝试了一些没有返回的东西。

它同时进入网格的填充/边距/列。

这是否可以在bootstrap 3网格中实现？

我需要在至少99％的已安装浏览器中使用此功能。理想情况下，它在移动响应宽度上看起来也是一样的（只需使用通常的单列）。

感谢。

Answer 1

我使用图库的this模板快速设计了这个。

我写了3个类，一个标题，类别和三角类：

.heading {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  position: absolute;
  bottom: 30px;
  right: 35px;
  color: white;
}

.category {
  display: inline-block;
  background-color: #ff9800;
  padding: 5px;
  position: absolute;
  left: 5px;
  color: white;
}
.triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 16px 0;
  border-color: transparent #e65100 transparent transparent;
  left:5px;
  top: 55px;
}

如果您想查看整个网站的来源，请点击here

桌面视图：

移动视图：