如何绘制和定位三角形？

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

正如亚当说，最好的做法是用一个三角形。

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

Answer 2

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

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

编辑：

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

http://jsfiddle.net/ndudD/

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