如何在HTML / CSS中绘制对角尖的箭头？

Question

我正在将Word文档转换为纯HTML和CSS。现在，我需要在网站上创建一个双向箭头。

这应该实现：

准备的HTML：

<div class="container-flex">
    <p>
        5 · 6 = 30
    </p>
    <p>
        8 · 4 = 
    </p>
    <p>
        9 · 3 = 
    </p>
    <p>
        32 : 8 = 
    </p>
    <p>
        70 : 7 = 
    </p>
    <p>
        30 : 5 = 6
    </p>
</div>

准备的CSS（flex分为两列）：

.container-flex {
    display:flex;
    flex-flow:column wrap;
    max-height:200px;
}
.container-flex p {
    width:250px;
    height:30px;
}

提琴：https://jsfiddle.net/kai_noack/Ljue9xbg/1/

我使用gradient in CSS找到了一个答案，但是我认为这不适用于这里。同样，horizontal arrows的另一个答案也不适用。

我可以通过哪些方式实现上面的箭头？