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

Question

在我的jsFiddle中，我无法正确显示三角形。它要么位于我的文本容器之上，要么位于背景容器之后。如何让它舒适地保持在中间？

<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>

这是我想要做的事情的照片。底部的“三角形”代表您当前所在的页面。

Answer 1

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

尝试创建宽度为0且高度为0的div，并为其设置8px边框。然后，使所有边框都透明，除了一个（在你的情况下是你的顶部边框），你最终会得到一个三角形。

编辑：

抱歉，忘了保存我的小提琴：

http://jsfiddle.net/ndudD/

div { width:0; height:0; border: 8px solid transparent; border-top-color: #000; }

Answer 2

正如亚当所说，最佳做法是使用三角形。

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

非常有用的css三角形截屏视频：

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-drawing-and-using-css-triangles/