html - 如何绘制和定位三角形？

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/