使用'div'元素和css进行垂直箭头处理？

Question

我必须在我的网站上做类似于捕获的内容（见下文）。

我用Photoshop做这件事。但是这一次我想知道这是否可以用3'div'元素和css完成。

更新：这个类似How to make this arrow in CSS only?但我的是垂直的。

有了这个，我得到FIRS arrow div：

.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;
}