Html 如何使用CSS创建此有角度的条形图

我需要用html和css创建这个形状，忽略灰色边框

这是我的html：

<span class="bar-wrapper">
    <span class="bar first">&nbsp;</span><span class="bar last">&nbsp;</span>
</span>

---

我如何才能做到这一点，并使两条线以这样的角度相交？

您可以使用单个元素、伪元素和变换来实现这一点：skew

div{ 高度：1米； 位置：相对位置； 溢出：隐藏； } div:before，div:after{ 位置：绝对位置； 内容：； 身高：100%； 变换：倾斜30度； } 部门：以前{ 宽度：80%； 左-10%； 背景：9fd256； } 部门：之后{ 宽度：40%； 右图：-10%； 背景：5d7cb8； }

---

三角形形状可以通过操纵边界来实现，通过使边界的一个或多个边透明可以实现这一点

编辑： 我推荐@MichaelCoker answer，因为它更容易定制

.酒吧{ 宽度：200px； 显示：内联块； 边框：10px固体000； } 酒吧第一{ 边框颜色：蓝色； 右边框颜色：透明； 边框顶部宽度：0； } 最后一个酒吧{ 边框底宽：0； 边框颜色：红色； 左边距：-10px； 左边框颜色：透明； } 请提供一份报告。