css - （向下）带有 CSS 的箭头框

Question

我想做这个箭头框所做的事情，但我希望它指向下方，而不是指向右侧的箭头。

我试过这样的事情：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 而言，它往往是不可靠的。我想要一个 div 解决方案。

Answer 1

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

使用两种选择，一种使用 inner div，另一种使用伪元素:after

Answer 2

在这里你有http://jsfiddle.net/bqX3S/28/ 重点是使用相同的宽度和顶部值

width: 100px;
top: 100px;

因此，如果更改 #arrow 宽度，您还需要为 :after 和 :before 元素更改顶部

Answer 3

您可以使用:after具有相同样式的伪元素加上display: block; content: ""; background-color: white（或 BG 实际应该是什么）。

http://jsfiddle.net/ExplosionPIlls/hbzHZ/15/