创建一个"；箭头“；使用html5、css和\或bootstrap高于其他元素

在下图中，有一个箭头伸出底部边缘的中间。我怎样才能做到这一点？我把它标上了红色的长方形

（来源：）

---

绿色和白色似乎是两个不同的

标记。我似乎不知道该用谷歌搜索什么，这是一个网站的图片，而实际的网站还没有这张图片，因此无法打开它并查找代码。

使元素

位置：相对
这是必要的，因为对于arrow，您将使用
位置：绝对
。所以相对位置会将其子对象约束在其内部。然后制作你们可以使用的箭头。您可以使用元素，而不是为箭头创建单独的元素


部分{
高度：250px；
位置：相对位置；
背景：蓝色；
边缘底部：50px；
}
.部分：之前{
内容：''；
位置：绝对位置；
左：0；
右：0；
底部：-30px；
保证金：自动；
宽度：0；
身高：0；
边框样式：实心；
边框宽度：30px 50px 0 50px；
边框颜色：蓝色透明；
}
在
之后使用伪元素
，技巧是
定位：绝对和边框是否正确

使用
top:100%
和
边框顶部
对于
：在
之后，在div底部添加向下箭头

使用
bottom:100%
和
边框底部
对于
：在
之后，在div顶部添加向上箭头


.con:after{
内容：''；
位置：绝对位置；
最高：100%；
左：50%；
左边距：-50px；
宽度：0；
身高：0；
边框顶部：实心50px#e15915；
左边框：实心50px透明；
右边框：实心50px透明；
}
.con{
宽度：100%；
高度：100px；
背景颜色：绿色；
位置：相对位置；
}
这应该对您有所帮助，它是
CSS

.arrow_box {
    position: relative;
    background: #88b7d5;
    border: 4px solid #c2e1f5;
}
.arrow_box:after, .arrow_box:before {
    top: 100%;
    left: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-top-color: #88b7d5;
    border-width: 30px;
    margin-left: -30px;
}
.arrow

_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-top-color: #c2e1f5;
    border-width: 36px;
    margin-left: -36px;
}

您必须在标记中设置类，如下所示：

<div class="arrow_box">
            <h1 > Something </h1>
</div>


某物

检查小提琴以了解其工作原理：
可能重复的