在右侧CSS上创建带有三角形的列表

Question

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

到目前为止我的工作：

#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);
}

和当前看起来：

以及它应该如何：

Answer 1

此问题有多种解决方案。既然你已经开始使用CSS3了here's my approach using CSS only。

这里所做的主要是滥用空HTML元素周围的边框。通过不设置右边框，它被设置为0.然后调整其他边框以适合边框，这恰好会导致创建箭头形状。

由于这个原因，修改箭头的大小/形状可能有点棘手（有多个选项;我更喜欢当前的情况）：

• 设置<li>的行高，以便更容易确定正确的箭头高度。
• 要调整箭头大小，您必须将li:after的宽度border-top和border-bottom设置为值line-height + padding-top + padding-bottom的50％。 <li>元素..
• 通过调整border-left，您可以确定箭头的长度。
• 最后，margin-top的{​​{1}}将定义箭头之间的间距。

由于您的图片还会显示一些悬停颜色，因此可以看到here。虽然重要的是要注意到目前为止转换不适用于渐变。

当然，使用固定图像作为背景将更加向后兼容旧浏览器，但这也取决于

Answer 2

您可以使用http://cssarrowplease.com/网站在所有方向创建自定义箭头。将高度更改为您需要的任何高度。然后，您可以调整样式以获得所需的样式。

Answer 3

这是一种方法：

小提琴： http://jsfiddle.net/SM2NR/

#side-menu li:after {
    content: "";
    position: absolute;
    right: -20px;
    top: -13px;
    width: 0;
    height: 0;
    border-top: 22px solid transparent;
    border-left: 20px solid #0054A6;
    border-bottom: 22px solid transparent;
}