jquery - 如何在一组元素周围显示有角度的边框？

Question

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

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

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 怎么样？那里有什么我可以用来帮助的吗？

Answer 1

有一个非常好的教程可以在 TutsPlus (链接) 上实现类似的东西，应该做一些调整（例如，添加类和填充，使其看起来好像每次都在移动）。

很确定这不会在所有浏览器中可靠地工作，尤其是 IE。如果您希望它跨浏览器工作，我建议将列表项上的背景图像作为斜线，然后为每个列表项添加填充以使其看起来向外移动。

Answer 2

你可以用 HTML5 画布尝试这样的事情：

<canvas id="myCanvas" width="578" height="200"></canvas>

Javascript：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(10, 10);
context.lineTo(150, 50);
context.stroke();

http://jsfiddle.net/hescano/YxF9t/1/

更多信息：http ://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

Answer 3

我想你可以做类似的事情：http: //jsfiddle.net/TKhLw/

使用：

ul {
    position: absolute;
    top: -130px;
    height: 500px;
    left: -100px;
    width: 350px;
    padding-top: 170px;
    overflow-x: hidden;
    -webkit-transform: rotate(-30deg);
}
ul > li {
    position: relative;
    width: 120%;
    padding-left: 160px;
    list-style: none;
    border: 1px solid #000000;
    -webkit-transform: rotate(30deg);
}

如果你将它嵌套得更深，你也可以让链接排成一行。