I would like to make this menu in pure HTML and CSS or something with Javascript.
I tried using some alternatives using a container and modifying its borders, but I didn’t get a decent and desired result. Let’s say I’m not the best guy in HTML/CSS
This is how I would like it to look example If anyone can help me with this I would be extremely grateful.
The closest I got to the result was this, but I can’t make any progress, and I don’t think this is ideal because as I’m going to align items on the edges, I don’t know what else to do to get the result in the example.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic path</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.half-circle {
width: 100px;
height: 200px;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
border: 10px solid gray;
border-right: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="half-circle"></div>
</body>
</html>
I tried an approach using borders in a container as you can see in the code block I mentioned above
LearningProgramming0x1 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.