css - 带 CSS 的(向下)箭头框

Question

我想做啥this arrow box does ，但我希望它指向下方，而不是指向右侧的箭头。

我尝试过这样的事情:jsfiddle link here

#triangle-down {
    width: 0;
    height: 0;
    border-left: 150px solid transparent;
    border-right: 150px solid transparent;
    border-top: 30px solid red;
}
#body {
    background-color: red;
    width:300px;
}

<div id="body">
     <h2>Title</h2>

    <p>this is text.</p>
</div>
<div id="triangle-down"></div>

在排列两个 div 方面往往不可靠。我想要一个单格解决方案。

Answer 1

在这里...还为多个可能的方向添加了一些基本样式... http://jsfiddle.net/hbzHZ/16/

使用两种替代方案，一种使用内部 div，另一种使用伪元素 :after