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

Question

我不太确定我是否可以只使用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不能这样做。那么canvas或jQuery呢？我可以在那里帮忙吗？

Answer 1

有一个非常好的教程可以在TutsPlus（link）上实现类似的功能，通过一些调整（例如，添加类和填充以使其看起来好像它正在进一步移动）每一次）。

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

Answer 2

您可以使用HTML5 canvas尝试这样的事情：

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

如果你将它嵌套得更深，你也可以获得排队的链接。