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

Question

Not too sure if I can even do this with just CSS but here goes:

I want to use the border property (or similar) to display an angled border around a group of elements. I suppose the best way to explain is just to show you:

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: /* ??? */ ;
}

Looks Like:

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

Preview:

As far as I know plain css can't do this. What about canvas or jQuery? Would there be something I could use there to help?

Answer 1

There's a pretty good tutorial to achieve something similar over at TutsPlus ( link ) that should do the trick, with a few tweaks (for example, adding classes and padding to make it appear as if it's moving further and further each time).

Pretty sure this won't work reliably in all browsers though, especially IE. If you want it to work cross-browser I'd recommend having the background image on the list item as the slanted line and then adding padding to each list item to make it appear to move outwards.

Answer 2

You can try something like this with 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/

More Info: http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

Answer 3

I suppose you could do something akin to this: http://jsfiddle.net/TKhLw/

using:

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

If you nested it deeper, you could get the links to line up as well.