Pentagon Men using CSS is a menu where five menu items are arranged in a pentagon shape. In the center, the open and close button lives. This menu is created by Kit Jenson on Codepen.

Also, Read- Sliding Tabs using CSS

How to create a Pentagon menu using CSS?

To create a pentagon menu we will follow the below steps

Step 1: HTML

First, we will create an index.html file and write the HTML code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Pentagon Menu using CSS</title>
  </head>
  <body>
    <nav class="menu open_menu">
      ≡
      <a class="nav-item" title="Home" href="#">🏠︎</a>
      <a class="nav-item" title="Search" href="#">🔎︎︎</a>
      <a class="nav-item" title="Notifications" href="#">🔔︎</a>
      <a class="nav-item" title="Favorites" href="#">❤︎</a>
      <a class="nav-item" title="Profile" href="#">👤︎</a>
    </nav>
    <script src="main.js"></script>
  </body>
</html>

Step 2: CSS

Now, we will create a style.css file and copy the below code to it

body {
  --btn-size: 150px;
  --accent-color: red;
  width: 100%;
  height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #efefef;
  font-size: calc(var(--btn-size) * 0.55);
}

.menu {
  position: relative;
  width: var(--btn-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  color: white;
  cursor: pointer;
  user-select: none;
  transition: 0.75s;
  line-height: 100%;
}
.menu:after {
  content: "\2630";
  width: var(--btn-size);
  aspect-ratio: 1 / 1;
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  background: var(--accent-color);
  border-radius: inherit;
  font-size: calc(var(--btn-size) * 0.48);
  transition: 0.75s;
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.5);
}
.open_menu:after {
  content: "\00D7";
  background: gray;
}

.nav-item {
  width: var(--btn-size);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--accent-color);
  position: absolute;
  transition: 0.75s;
  user-select: none;
  left: 0;
  top: 0;
  transform: scale(0.1);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  font-family: sans-serif;
  color: white;
  box-sizing: border-box;
  display: grid;
  place-items: center;
}

.open_menu .nav-item {
  transform: scale(1) rotate(360deg);
}
.open_menu .nav-item:hover {
  transform: scale(1.25) rotate(360deg);
}

.open_menu .nav-item:nth-child(1) {
  top: calc(var(--btn-size) * -0.4);
  left: calc(var(--btn-size) * -1.2);
}
.open_menu .nav-item:nth-child(2) {
  top: calc(var(--btn-size) * -1.2);
  left: 0px;
}
.open_menu .nav-item:nth-child(3) {
  top: calc(var(--btn-size) * -0.4);
  left: calc(var(--btn-size) * 1.2);
}
.open_menu .nav-item:nth-child(4) {
  top: calc(var(--btn-size) * 1);
  left: calc(var(--btn-size) * -0.8);
}
.open_menu .nav-item:nth-child(5) {
  top: var(--btn-size);
  left: calc(var(--btn-size) * 0.8);
}

Step 3: Javascript

Finally, we will create a main.js file and write the below code

document.querySelector(".menu").addEventListener("click", function () {
  this.classList.toggle("open_menu");
});

That’s it.

The source code is available on Github.

If you find this post helpful then please share this with your friends.