CSS and HTML 5 – Making Shapes

Eli the Computer Guy *NEW, CSS and HTML 5

With CSS you can create shapes to add visual elements to your HTML documents.

Shape Examples: https://www.w3schools.com/howto/howto_css_shapes.asp

shapeStyle.css

.square {
	width: 40px;
	height: 40px;
	background-color: grey;
}

.rectangle {
	width: 100px;
	height: 40px;
	background-color: grey;
}

.circle {
	width: 40px;
	height: 40px;
	background-color: grey;
	border-radius: 50%;
}

.oval {
	width: 100px;
	height: 40px;
	background-color: grey;
	border-radius: 50%;
}

shape.html

<html>
<head>
<link rel="stylesheet" href="shapeStyle.css" />
</head>
<body>

<div class="square"></div>
<br>
<div class="rectangle"></div>
<br>
<div class="circle"></div>
<br>
<div class="oval"></div>
<br>

</body>
</html>