CSS für überlappende Spielkarten

[Regina Schlauklug]

Ich habe eine Liste an Karten und möchte die so darstellen, dass die sich etwas versetzt voneinander überlappen.

In verlinktem Beispiel habe ich das im ersten <ul> mit inline-styles gemacht, dass es so aussieht wie ich will.

Gibt es dafür eine Lösung ohne inline-styles?

Wichtig ist mir dass das <ul> alle <li>s umfasst (deshalb der rote Rahmen im Beispiel, um das zu verdeutlichen)
Die Reihenfolge in welcher die <li>s dargestellt werden ist egal (ob das Erste ganz vorne ist, oder das Letzte ganz vorne spielt für mich keine rolle). Die Anzahl der <li>s ist variabel.