html三角形无序列表样式,在右侧CSS上创建带有三角形的列表

我试图在图像上创建一个列表,但我无法弄清楚如何做到这一点.到目前为止,我已经做到了这一点,但似乎我做得不对：

到目前为止我的工作：

#side-menu li:nth-child(even) {

background: rgb(0,169,148);

background: -moz-linear-gradient(left, rgba(0,169,148,1) 1%, rgba(0,84,166,1) 100%);

background: -webkit-gradient(linear, left top, right top, color-stop(1%,rgba(0,169,148,1)), color-stop(100%,rgba(0,84,166,1)));

background: -webkit-linear-gradient(left, rgba(0,169,148,1) 1%,rgba(0,84,166,1) 100%);

background: -o-linear-gradient(left, rgba(0,169,148,1) 1%,rgba(0,84,166,1) 100%);

background: -ms-linear-gradient(left, rgba(0,169,148,1) 1%,rgba(0,84,166,1) 100%);

background: linear-gradient(to right, rgba(0,169,148,1) 1%,rgba(0,84,166,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a994', endColorstr='#0054a6',GradientType=1 );

border-top: 13px solid transparent;

border-bottom: 13px solid transparent;

border-left: 10px solid rgba(0,84,166,1);

}

当前看起来：

它应该如何：