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

Answer 2

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

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

Answer 3

这里有http://jsfiddle.net/bqX3S/28/ 关键是要使用相同的宽度和最高值

width: 100px;
top: 100px;

因此，如果更改#arrow宽度，则需要更改top：in和：之前的元素

（下）带有CSS的箭头框

3 个答案: