Beispiel:CSS2 border-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!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>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS2_border-3.html&oldid=92299“