Html 基本结构

我想做一个这样的基本结构，但条件是我必须在html中只使用“li”，并完全使用CSS进行设计。结构应该是这样的，我可以将任何图像放入其中

HTML:

过程1
过程2
过程3

这里有一种方法，使用伪元素，它是倾斜的，一个在上半部分，另一个在下半部分

更新了一个也可以使用图像的选项，并且由于还没有很好的浏览器支持，这里使用
后台
/
封面


。基本雪佛龙工艺，
.基本雪佛龙工艺li{
保证金：0；
填充：0；
}
.基本雪佛龙工艺li{
显示：内联块；
位置：相对位置；
文本对齐：居中；
高度：60px；
线高：60px；
填充：0 10px；
宽度：120px；
垂直对齐：顶部；
溢出：隐藏
}
.基本\u雪佛龙\u过程li输入，
.basic_雪佛龙_流程li select{
宽度：70%；
}
.基本雪佛龙工艺李：之前，
.基本雪佛龙工艺李：之后{
内容：''；
位置：绝对位置；
排名：0；
左：6%；
身高：50%；
宽度：88%；
背景：浅蓝色；
变换：斜交（30度）；
z指数：-1；
}
.基本雪佛龙工艺李：之后{
最高：50%；
变换：斜X（-30度）；
}
.basic\u chevron\u流程li:n子项（2）：：之前{
显示：无；
}
.basic\u chevron\u流程li:n子项（2）：：之后{
左：0；
排名：0；
身高：100%；
宽度：100%；
变换：skewX（0）；
背景：线性梯度（60度，透明50%，#fff 50%）无重复右上角，
线性梯度（120度，透明50%，#fff 50%）右下无重复，
线性梯度（-120度，透明50%，#fff 50%）无重复左上角，
线性梯度（-60度，透明50%，#fff 50%）无重复左下角，
网址(http://lorempixel.com/300/200/animals/3/)无重复中心；
背景尺寸：31px 31px，
31px 31px，
31px 31px，
31px 31px，
掩护；
}






选择1
选择2

这里有一种方法，使用伪元素，它是倾斜的，一个在上半部分，另一个在下半部分

更新了一个也可以使用图像的选项，并且由于还没有很好的浏览器支持，这里使用
后台
/
封面


。基本雪佛龙工艺，
.基本雪佛龙工艺li{
保证金：0；
填充：0；
}
.基本雪佛龙工艺li{
显示：内联块；
位置：相对位置；
文本对齐：居中；
高度：60px；
线高：60px；
填充：0 10px；
宽度：120px；
垂直对齐：顶部；
溢出：隐藏
}
.基本\u雪佛龙\u过程li输入，
.basic_雪佛龙_流程li select{
宽度：70%；
}
.基本雪佛龙工艺李：之前，
.基本雪佛龙工艺李：之后{
内容：''；
位置：绝对位置；
排名：0；
左：6%；
身高：50%；
宽度：88%；
背景：浅蓝色；
变换：斜交（30度）；
z指数：-1；
}
.基本雪佛龙工艺李：之后{
最高：50%；
变换：斜X（-30度）；
}
.basic\u chevron\u流程li:n子项（2）：：之前{
显示：无；
}
.basic\u chevron\u流程li:n子项（2）：：之后{
左：0；
排名：0；
身高：100%；
宽度：100%；
变换：skewX（0）；
背景：线性梯度（60度，透明50%，#fff 50%）无重复右上角，
线性梯度（120度，透明50%，#fff 50%）右下无重复，
线性梯度（-120度，透明50%，#fff 50%）无重复左上角，
线性梯度（-60度，透明50%，#fff 50%）无重复左下角，
网址(http://lorempixel.com/300/200/animals/3/)无重复中心；
背景尺寸：31px 31px，
31px 31px，
31px 31px，
31px 31px，
掩护；
}






选择1
选择2


<ul class="basic_chevron_process">
<li>Process 1</li>
<li>Process 2</li>
<li>Process 3</li>
</ul>