Jquery 将一个DIV与其他两个DIV重叠

我有一些酒吧形式的内容：

但我需要把边缘（或酒吧的尽头）指向我。为此，我添加了另一个带有

白色

边框的div。但是，使用这种方法，我可以隐藏一个div的内容，但其他div的内容仍然可见。

我尝试使用z-index来修复它，但没有成功

问题：

附言：

由于浏览器支持不一致，无法使用剪辑路径、内部形状、外部形状

第三部门的内部内容将是透明的

.parent{
左：0.00%；
宽度：100%；
高度：40px；
显示：块；
}
.孩子{
宽度：62%；
}
.第1行{
高度：24px；
宽度：100%；
显示：块；
不透明度：.25；
背景颜色：蓝色；
}
.row2{
高度：16px；
背景颜色：蓝色；
宽度：100%；
显示：块；
}
.row3{
背景色：红色；
浮动：对；
利润率：-40px 0 px；
边框顶部：20px纯白；
边框底部：20px纯白；
左边框：20px实心透明；
}

给父div一个箭头背景，将其位置设置为右上角，然后给它一个与背景宽度相等的右填充。应该这样做。不需要第3行。

您可以去掉.row3，并使用此CSS三角形jobby（假设您的小提琴中.child的高度是它将是什么-但对于其他尺寸，很容易修复）。这是它的一部分

---

只需删除这一行，这是不需要的，因为块元素占用了所有可用空间：

.row1{
宽度：100%；
}

然后添加一些余量，以减少可用空间：

.row1{
右边距：20px；
}

.parent{
左：0.00%；
宽度：100%；
高度：40px；
显示：块；
}
.孩子{
宽度：62%；
}
.第1行{
高度：24px；
右边距：20px；
显示：块；
不透明度：.25；
背景颜色：蓝色；
}
.row2{
高度：16px；
背景颜色：蓝色；
宽度：100%；
显示：块；
}
.row3{
背景色：红色；
浮动：对；
利润率：-40px 0 px；
边框顶部：20px纯白；
边框底部：20px纯白；
左边框：20px实心透明；
}

---

这是一种不同的方法，但这是一种选择

使用border属性创建一个箭头，并将其浮动到另一个用作条形图的div上。 使用CSS渐变作为一个选项，以颜色您的酒吧。 基于从CSS tricks.com使用CSS创建箭头点

CSS

  .arrow-right {
        position:relative;
        float:left;
        border-left: 40px solid blue;
        border-top: 40px solid transparent;
        border-bottom: 40px solid transparent;
        width:0;
        height:0;
    }
    .bar {
        width:300px;
        height:80px;
        background: blue;
        float:left;
    }

HTML

<div class="bar"></div>
<div class="arrow-right">

一些文本

一些文本

一些文本

一些文本

查看此css样式：

.row3 {
background-color: red;
float: right;
margin: -40px 0 0 337px;
border-top: 20px solid white;
border-bottom: 20px solid white;
border-left: 20px solid transparent;
position: absolute;
}

---

Fiddle:

你的浏览器要求是什么？根据你想做的事情有多粗糙，你可以在背景的同一个角落创建一个div，使用css变换旋转它，并将其放置在你不想看到的部分上……谢谢你，丹尼尔，但我的用例有点不同。1.我需要指针成为内容的一部分，而不是扩展它。2.在我的例子中，内容是一些文本内容，不能使用

蓝色

颜色作为边框。我尝试了CSS技巧，效果很好。谢谢您的时间。@Rohit-不客气。我无意中发现了CSS箭头，只是碰巧在玩它。你的帖子给这增加了一点挑战。。。通过一些调整，可以使用CSS箭头并将其应用于保存内容的div。我玩了一些更多的自己的娱乐，并得到了上述增加的结果。也许这会有用。

.row3 {
background-color: red;
float: right;
margin: -40px 0 0 337px;
border-top: 20px solid white;
border-bottom: 20px solid white;
border-left: 20px solid transparent;
position: absolute;
}