在右侧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了,这里只是使用CSS的方法.

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

因此,修改箭头的大小/形状可能有点棘手(有多个选项;我更喜欢这个当前情况):

• 设置行高,<li>以便更容易确定正确的箭头高度.
• 要调整箭头大小,您必须设置li:after两者的宽度,border-top并border-bottom设置元素值line-height + padding-top + padding-bottom的50%<li>.
• 通过调整border-left你能够确定箭头的长度.
• 最后,margin-top的li + li将限定的箭头之间的间距.

由于您的图像也暗示了一些悬停颜色,这可以在这里看到.虽然重要的是要注意到目前为止转换不适用于渐变.

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