Css 在引导中对齐重叠的div

我的第一个问题是：）

我决定复制并重新创建此头版： www.liveform.pl

为了在战场上练习我的新技能

这是我的起始页：

我很难将红色框与三角形对齐，三角形分别是div（矩形）和p（三角形），看起来像：

.ontop1 {
position: absolute;
top: 94%;
bottom: 0;
left: 42%;
right:0;
z-index: 99999;
width: 300px;
height: 60px;
pointer-events:none;
background-color: rgba(255, 0, 72, 1);
padding-top: 11px;
}

.triangle1 {
position: absolute;
top: 98.8%;
bottom: 0;
left: 48%;
right:0;
z-index: 99999;
width: 0;
height: 0;
text-indent: -9999px;
border-right: 40px solid transparent;
border-top: 40px solid rgba(255, 0, 72, 1);
border-left: 40px solid transparent;
}

“我们的最新项目”的第一部分或多或少成立（尽管当我开始调整大小时，三角形本身也有魔力）

但是我对“我们是谁”和“我们做什么”有问题

我如何定位这些元素，使它们保持粘在某个位置？

1）我会将您的红色框放在与之相关的

行

元素中

2） 我将在该

行

元素上设置

位置：相对

（这样，红色框将相对于该

行

）

3） 我会在红色框上设置一个

top:-60px

（箭头上有类似的东西），将其稍微移动到

行上

4） 我会在红框上设置一个

左：50%

和

左边距：-150px

（红框宽度的一半）（箭头上类似的东西）使其水平居中<代码>左：0；右：0；保证金：自动也可以工作

也许将箭头和方框放在一个元素中，并更改该元素的位置，而不是同时更改这两个元素，会更容易

---

编辑：例如：

我们最新的项目
 

.triangle{astralRecall:center；}

？正如您所说，我用这些矩形和三角形形状制作了一个简单的png，然后将

.row

设置为

位置：relative

，效果很好：）谢谢！！我不是在说创建png。我说的是将它们分组到一个

div

元素中。例如：

我们最新的项目