Beispiel:Border-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de"> <head> <meta charset="utf-8"> <title>border-Tricks</title> <style> div { border-style: solid; border-top-color: yellow; border-right-color: green; border-bottom-color: blue; border-left-color: red;
}
- slant {
border-width: 1em; width: 4em;
height: 4em; animation: slant 3s infinite alternate linear;
}
@keyframes slant {
0 {
width: 4em;
height: 4em;
border-width: 1em;
}
100% {
width: 0;
height: 0;
border-width: 3em; border-color: transparent; border-bottom-color: blue;
}
}
- slant2 {
width: 0; height: 0;
border-width: 3em;
animation: slant2 3s infinite alternate linear;
}
@keyframes slant2 {
0 {
border-width: 3em;
}
50% {
border-width: 2em 4em 4em 2em;
}
100% {
border-width: 0em 1em 6em 5em;
border-color: transparent; border-bottom-color: blue;
}
} </style>
</head>
<body>
Tricks mit border
Dreiecke mit border erzeugen
unterschiedliche Randbreiten
</body> </html>
