html - 在两个部分之间放置一个箭头框

Question

我真的不知道如何解决这个问题，但这就是我想要做的，放置白色箭头框:

我知道如何做一个箭头框，但像那样放置它对我来说是个谜。目前我有两个部分，上部和下部，然后尝试给盒子一个绝对位置，但没有成功。

我该如何解决这个问题？我确信有一个简单的解决方案，但我对 CSS 经验不足。

Answer 1

我自己也不太明白你的问题。如果你试图将你的盒子定位在较低的蓝色容器的中间: position:absolute 我会自己尝试

.box {
    height:100px;
    width:300px;
    background-color:red;    
    position:absolute;
    top:-50px;
    left:50%;
    margin-left:-150px; /*this has to be half your box width negative margin*/
}

不要忘记添加相对于您的蓝色 div 的位置(或固定的，或绝对的……只是不是默认的静态)。以 fiddle 为例(我添加了 css 框箭头以备不时之需):http://jsfiddle.net/j5a0227s/1/