#split CSS/HTML/jQuery Problem

[jouunas]

Hallo allerseits

Ich hab ein Problem das für mich unlösbar scheint...
Weiss nicht ob ich im richtigen Forum bin, geht um HTML, CSS und auch jQuery.

Folgendes: Ich hab so etwas wie er hier im sinn: Calvin Roberson | Portfolio | Web Design
Was ich aber anders möchte, sind die Striche die sich bewegen. Ich möchte Zickzack Muster
die geschlossen ineinandergreifen. Wenn man nun den Button betätigt, sollen diese
auseinander gehen und die Zickzacke zum Vorschein kommen.

Sein CSS Code für die Linie sieht folgendermassen aus:

Code:

#split {
border-top-width: 1px;
border-bottom-width: 1px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #000;
border-bottom-color: #000;
height: 3px; width: 925px;
margin-right: auto;
margin-left: auto;}

wobei «split» wohl auch in anderen (jQuery) Dateien vorkommt, darf also nicht
geändert werden.

Nun möchte ich diese «1px borders» durch meine zwei Zickzack Dateien ersetzen
(oben und unten jeweils anders, siehe Anhang). Geht das? Wenn ja, wie?


Vielen Dank im Voraus für eine helfende Antwort.
jouunas​

 

[threadi]

Ginge höchstens indem Du das als Hintergrundbild definierst, welches sich nur auf der x- oder y-Achse wiederholt. Stichworte background-image und background-repeat. Ggfs. auch background-position, wenn Du das Hintergrundbild nur oben oder nur unten haben willst.