Html 如何绘制和定位三角形？

在我的示例中，我无法使三角形正确显示。它要么在我的文本容器上面，要么在背景容器后面。我怎样才能让它舒服地留在中间？

<div class="container">
<div class="firefighter-link">
    Program Overview
</div>
<div class="firefighter-current-page">
    Program Overview
    <div class="firefighter-current-page-corner"></div>
</div>
</div>

这是一张我正在尝试做的图片。底部的三角形表示您当前所在的页面。

---

你不应该使用正方形并旋转它，你应该使用三角形

尝试创建一个宽度为0、高度为0的div，并给它一个8px的边框。然后，使所有的边界都透明，除了一个在你的例子中是你的上边界，你将得到一个三角形

编辑：

对不起，忘了保存我的小提琴：

---

你不应该用正方形来旋转它，你应该用三角形

尝试创建一个宽度为0、高度为0的div，并给它一个8px的边框。然后，使所有的边界都透明，除了一个在你的例子中是你的上边界，你将得到一个三角形

编辑：

对不起，忘了保存我的小提琴：

---

正如亚当所说，最佳实践是使用三角形

.triangle{
    width:0;
    height:0;
    border-top: 50px solid blue;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

非常有用的css三角形屏幕广播：

---

正如亚当所说，最佳实践是使用三角形

.triangle{
    width:0;
    height:0;
    border-top: 50px solid blue;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

非常有用的css三角形屏幕广播：

---

adam，你的JSFIDLE链接到他们的主页。顺便说一句，非常棒的信息我很高兴看到它是如何工作的。这可能就是重点。不是给你解决方案，而是给你机会通过自己动手来学习。它确实做到了！这里有一个很好的形状列表，您可以使用CSS创建具有类似属性的形状：adam，您的JSFIDLE链接到它们的主页。顺便说一句，非常棒的信息我很高兴看到它是如何工作的。这可能就是重点。不是给你解决方案，而是给你机会通过自己动手来学习。它确实做到了！这是一个很好的形状列表，您可以使用CSS创建具有类似属性的形状：