How to Make Pac Man Shape Using CSS

Share on facebook
Share on linkedin
Share on twitter
Share on email
Use "ufd6qb86" For Offers

https://youtu.be/lMw9CGLtCLw

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%;

} 
Get 20% Off on Trading Fee Use "LG3RJV7Z"

More To Explore

Use "ufd6qb86" For Offers