css - 在右侧 CSS 创建带有三 Angular 形的列表

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到值的 50% line-height + padding-top + padding-bottom的 <li>元素..
• 通过调整 border-left你可以确定箭头的长度。
• 最后，margin-top的 li + li将定义箭头之间的间距。

由于您的图片还暗示了一些悬停颜色，所以这是可能的，也可以看到 here .尽管重要的是要注意到目前为止过渡不适用于渐变。

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