How to build a civ in css - html

Question

I have no idea what this is called but I want to build this nav the way it is on the picture I came pretty far using tailwind and custom css, but I'm stuck.
Does anyone know what this is called (to update the title) and how to build it?
My attempt:
.active::before {
content: "";
position: absolute;
background-color: transparent;
border-color: white;
border-width: 0 0.5rem 0.5rem 0;
width: 2rem;
height: 2rem;
right: -0.5rem;
border-radius: 0 0 100% 0;
top: -1.5rem;
}
.active::after {
content: "";
position: absolute;
background-color: transparent;
border-color: white;
border-width: 0.5rem 0.5rem 0 0;
width: 2rem;
height: 2rem;
right: -0.5rem;
border-radius: 0 100% 0 0;
bottom: -1.5rem;
}
.active-link {
display: flex;
justify-content: center;
align-items: center;
background-color: white;
border-top-left-radius: 10rem;
border-bottom-left-radius: 10rem;
width: 5rem;
height: 2rem;
}
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet" />
<nav class="w-32 h-64 bg-indigo-900 rounded-xl">
<div class="flex flex-col items-center justify-between h-full py-12">
<div>
Title
</div>
<div class="w-full">
<ul class="flex flex-col items-center space-y-12 w-full">
<li class="w-full flex justify-center relative active">
<nuxt-link :to="menuItem.target" class="active-link">
<i class="text-black">Icon</i>
</nuxt-link>
</li>
</ul>
</div>
<div>
<i>Icon</i>
</div>
</div>
</nav>

Answer 1

This may be easier if all you need to do is add a classname to the selected element (as opposed to modifying the DOM structure whenever a new item in the navbar is clicked).
The following achieves this:
let nav = document.getElementsByClassName('navbar')[0];
for (let item of document.getElementsByClassName('item')) {
item.addEventListener('click', () => {
let selected = nav.querySelector('.item.selected');
if (selected) selected.classList.remove('selected');
item.classList.add('selected');
});
}
body { font-family: monospace; }
.navbar {
position: absolute;
left: 0; top: 0;
width: 60px; height: 100%;
padding-left: 10px;
background-color: rgba(70, 0, 170);
overflow: hidden;
}
.item {
position: relative;
height: 60px; line-height: 60px;
color: #fff;
text-align: center;
z-index: 1;
cursor: pointer;
}
.item.selected {
background-color: #fff;
border-radius: 100%;
color: #000;
}
.item.selected::before,
.item.selected::after {
content: ' '; display: block;
position: absolute;
left: 0; width: 100%; height: 100%;
pointer-events: none;
border-radius: 100%;
border: 50px solid rgba(0, 0, 0, 0);
border-right: 50px solid #fff;
margin-left: -50px;
z-index: -1;
}
.item.selected::before { bottom: 100%; margin-bottom: -50px; transform: rotate(45deg); }
.item.selected::after { top: 100%; margin-top: -50px; transform: rotate(-45deg); }
<div class="navbar">
<div class="item">(1)</div>
<div class="item">(2)</div>
<div class="item selected">(3)</div>
<div class="item">(4)</div>
</div>
That snippet is interactive, so try clicking menu items!
Note that the rounding is also very similar to the image you displayed, since we are using true circle radii.
The trick here is to add ::before and ::after elements to the selected item, and apply borders to them, remove all of the border except for one side, and finally rotate these pseudoelements so that the border goes where we want it. The following snippet demonstrates:
#keyframes styleBefore {
0% {
border: 0 solid #000;
margin-left: 0;
margin-bottom: 0;
}
20% {
border: 50px solid #000;
border-right: 50px solid #000;
margin-left: -50px;
margin-bottom: -50px;
}
40% {
border: 50px solid #000;
border-right: 50px solid #fff;
}
60% {
border: 50px solid transparent;
border-right: 50px solid #fff;
transform: rotate(0deg);
}
95% {
border: 50px solid transparent;
border-right: 50px solid #fff;
transform: rotate(45deg);
}
100% {
border: 50px solid transparent;
border-right: 50px solid transparent;
margin-left: -50px;
margin-bottom: -50px;
transform: rotate(45deg);
}
}
#keyframes styleAfter {
0% {
border: 0 solid #000;
margin-left: 0;
margin-top: 0;
}
20% {
border: 50px solid #000;
border-right: 50px solid #000;
margin-left: -50px;
margin-top: -50px;
}
40% {
border: 50px solid #000;
border-right: 50px solid #fff;
}
60% {
border: 50px solid transparent;
border-right: 50px solid #fff;
transform: rotate(0deg);
}
95% {
border: 50px solid transparent;
border-right: 50px solid #fff;
transform: rotate(-45deg);
}
100% {
border: 50px solid transparent;
border-right: 50px solid transparent;
margin-left: -50px;
margin-top: -50px;
transform: rotate(-45deg);
}
}
body { font-family: monospace; }
.navbar {
position: absolute;
left: 0; top: 0;
width: 90px; height: 100%;
padding-left: 10px;
background-color: rgba(70, 0, 170);
overflow: hidden;
}
.item {
position: relative; top: -85px;
height: 90px; line-height: 90px;
color: #fff;
text-align: center;
z-index: 1;
cursor: pointer;
font-size: 200%;
}
.item.selected {
background-color: #fff;
border-radius: 100%;
color: #000;
}
.item.selected::before,
.item.selected::after {
content: ' '; display: block;
position: absolute;
left: 0; width: 100%; height: 100%;
pointer-events: none;
border-radius: 100%;
z-index: -1;
}
.item.selected::before { bottom: 100%; animation: 10s infinite linear styleBefore; }
.item.selected::after { top: 100%; animation: 10s infinite linear styleAfter; }
<div class="navbar">
<div class="item">(1)</div>
<div class="item">(2)</div>
<div class="item selected">(3)</div>
<div class="item">(4)</div>
</div>

Answer 2

It's really a matter of pixels; to adjust pixel-wise the border-radius and top & bottom properties. Fiddled it.
.active::before {
content: "";
position: absolute;
background-color: transparent;
border-color: white;
border-width: 0 0.5rem 0.7rem 0;
width: 2rem;
height: 2rem;
right: -0.5rem;
border-radius: 0 0 100% 0;
top: -1.34rem;
outline: white;
}
.active::after {
content: "";
position: absolute;
background-color: #f8f8f800;
border-color: white;
border-width: 0.7rem 0.7rem 0px 0px;
width: 2rem;
height: 2rem;
right: -0.7rem;
border-radius: 0 100% 0 0;
bottom: -1.30rem;
}
.active-link {
display: flex;
float: right;
justify-content: center;
align-items: center;
background-color: white;
border-top-left-radius: 10rem;
border-bottom-left-radius: 10rem;
width: 8rem;
height: 5rem;
margin-left: 10px;
}
.active-link .text-black {
margin-left: -10px;
}
<link href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css" rel="stylesheet" />
<nav class="w-24 h-64 bg-indigo-900 rounded-xl">
<div class="flex flex-col items-center justify-between h-full py-12">
<div>
Title
</div>
<div class="w-full">
<ul class="flex flex-col items-center space-y-12 w-full">
<li class="w-full flex justify-center relative active">
<nuxt-link :to="menuItem.target" class="active-link">
<i class="text-black">Icon</i>
</nuxt-link>
</li>
</ul>
</div>
<div>
<i>Icon</i>
</div>
</div>
</nav>