Beispiel:CSS3 border-radius-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0;" />
  <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>border-radius - 3</title>
<style>
div {
	border: 3px solid red;
	padding: 2em;
	width: 10em;
	float: left;
	margin: 1em;
}

#rund {
  border-radius: 50%;
  width: 6em;
  height: 6em;
}

#rund8 {
  border-radius: 50%;
}

#rund9 {
  border: 0;
}

#rund9::after {
  content:'';
  height: 0;
  width: 0;
  border: 5em solid transparent;
  border-bottom: 5em solid red;
  border-radius: 50%;
}

</style>

</head>

<body>
<h1>Verwendung von <code>border-radius</code></h1>
<main>
   
  <h2>geometrische Formen</h2>
  
  	<div id="rund">Kreis</div>
	<div id="rund8">Oval</div>
 	<div id="rund9">Kegel</div>   
     
</main>
</body>

</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS3_border-radius-3.html&oldid=55852“