jquery - 如何在一组元素周围显示倾斜的边框？

不太确定我是否可以仅使用CSS做到这一点，但是这里有：

我想使用border属性（或类似属性）在一组元素周围显示倾斜的边框。我想最好的解释方式就是向您展示：

HTML：

<ul>
    <li>link</li>
    <li>link</li>
    <li>link</li>
</ul>

CSS：

li {
    border-top:1px solid black;
    border-bottom:1px solid black;
    border-right: /* ??? */ ;
}

好像：

-----------------\
link              \
-------------------\
link                \
---------------------\
link                  \
-----------------------\

预习：


据我所知，普通的CSS无法做到这一点。画布或jQuery呢？有什么可以帮助我的吗？

最佳答案

有一个很好的教程可以在TutsPlus（link）上实现类似的功能，并进行一些调整（例如，添加类和填充以使其看起来好像每次都在不断发展）。

可以肯定的是，尽管在所有浏览器中，特别是在IE中，它也无法可靠地运行。如果您希望它跨浏览器工作，我建议将列表项上的背景图像作为斜线，然后在每个列表项上添加填充以使其看起来向外移动。

关于jquery - 如何在一组元素周围显示倾斜的边框？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18449067/