Html 在CSS中实现横幅中的箭头形状

我想实现以下形状使用纯CSS，没有图像

我来谈谈以下几点

以下是HTML结构：

<div class="sixteen columns">
    <div id="applicationStatus">
        <ul>
            <li class="applicationStatus">Application Received</li>
            <li class="applicationStatusGood">Language Exam</li>
            <li class="applicationStatusNoGood">Oral Exam</li>
            <li class="applicationStatus">Grant</li>
        </ul>
    </div>
</div>

---

为什么

：before

选择器不适用于所有形状或所有形状？我怎样才能实现我的目标？

你可以试试这个网站

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

.arrow_box:after {
    border-color: rgba(136, 183, 213, 0);
    border-left-color: #88b7d5;
    border-width: 30px;
    top: 50%;
    margin-top: -30px;
}
.arrow_box:before {
    border-color: rgba(194, 225, 245, 0);
    border-left-color: #c2e1f5;
    border-width: 41px;
    top: 50%;
    margin-top: -41px;
}

修改代码 您面临的主要问题是在

li

元素上没有

position:relative

。但也有其他需要调整的地方

我将您在上面的HTML中未能引用的类添加到

ul

元素中，下面是HTML：

<div class="sixteen columns">
    <div id="applicationStatus">
        <ul class="applicationStatus">
            <li class="applicationStatus">Application Received</li>
            <li class="applicationStatusGood">Language Exam</li>
            <li class="applicationStatusNoGood">Oral Exam</li>
            <li class="applicationStatus">Grant</li>
        </ul>
    </div>
</div>

---

嗯，为了跨浏览器的缘故，我更喜欢使用图像。可能是重复的，谢谢。这正是我想要的。你帮了大忙。感谢：）

<div class="sixteen columns">
    <div id="applicationStatus">
        <ul class="applicationStatus">
            <li class="applicationStatus">Application Received</li>
            <li class="applicationStatusGood">Language Exam</li>
            <li class="applicationStatusNoGood">Oral Exam</li>
            <li class="applicationStatus">Grant</li>
        </ul>
    </div>
</div>