Beispiel:CSS2 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>
<h1>Tricks mit <code>border</code></h1>
<h2>Dreiecke mit border erzeugen</h2>
<div id="slant"></div>
<h2>unterschiedliche Randbreiten</h2>
<div id="slant2"></div>
</body>
</html>