How to Make Pac Man Shape Using CSS

October 5, 2021

Learn how to create pac man shape using css only, source code is given and video tutorial with explanation too.

HTML Code

<!DOCTYPE html>
<html>
<head>
  <title>Shape</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/style.css"/>

</head>
<body>


	<div class="container">
		<div class="arrow-pointer"></div>
	</div>
	
	
</body>
</html>

CSS Code

body{
	margin:0;
}

*{
	box-sizing: border-box;
}

.container{
	display: flex;
	justify-content:center;
	align-items: center;
	height: 100vh;
}

.pac-man{
	width: 0;
	height: 0;
	border-top: 50px solid red;
	border-left: 50px solid red;
	border-bottom: 50px solid red;
	border-right: 50px solid transparent;
	border-radius: 50%;

}