HTML CSS rounded menu [duplicate] - html

Question

This question already has answers here:
How to create a circle with links on border side
(8 answers)
Closed 5 years ago.
I'm looking but I can't find how create rounded menu like this on image. Is it posible only with html and css?
From 1 to 4 are buttons, any similar example would help.

Answer 1

i made your menu with html and css.
It was actually really simple:
HTML:
<div class='button-wrapper'>
<div class="btn1"></div>
<div class="btn2"></div>
<div class="btn3"></div>
<div class="btn4"></div>
</div>
CSS
.button-wrapper{
background-color: white;
width: 250px;
height: 250px;
padding: 50px;
position: relative;
transform: rotate(-45deg);
}
.btn1{
background: #EFE3B3;
width: 250px;
height: 125px;
border-top-left-radius: 150px;
border-top-right-radius: 150px;
}
.btn2{
background: #B6E438;
width: 125px;
height: 125px;
border-bottom-left-radius: 150px;
float: left;
}
.btn3{
background: #FEF035;
width: 125px;
height: 125px;
border-bottom-right-radius: 150px;
float: right;
}
.btn4{
background: #9BD9E9;
width: 50px;
height: 50px;
border-radius: 100px;
border: 20px solid #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate3d(-50%,-50%,0);
}
Also take a look at the plunkr I made.

Answer 2

if you want to have a pie chart, you can use highchart.js
or if you don't want to use highchart, you can use this code (this is what i found in code pen, it's a pen by patrick denny)
HTML
<div class="pie" data-start="0" data-value="30"></div>
<div class="pie highlight" data-start="30" data-value="30"></div>
<div class="pie" data-start="60" data-value="40"></div>
<div class="pie big" data-start="100" data-value="260"></div>
CSS
.pie {
position:absolute;
width:100px;
height:200px;
overflow:hidden;
left:150px;
-moz-transform-origin:left center;
-ms-transform-origin:left center;
-o-transform-origin:left center;
-webkit-transform-origin:left center;
transform-origin:left center;
}
.pie.big {
width:200px;
height:200px;
left:50px;
-moz-transform-origin:center center;
-ms-transform-origin:center center;
-o-transform-origin:center center;
-webkit-transform-origin:center center;
transform-origin:center center;
}
.pie:BEFORE {
content:"";
position:absolute;
width:100px;
height:200px;
left:-100px;
border-radius:100px 0 0 100px;
-moz-transform-origin:right center;
-ms-transform-origin:right center;
-o-transform-origin:right center;
-webkit-transform-origin:right center;
transform-origin:right center;
}
.pie.big:BEFORE {
left:0px;
}
.pie.big:AFTER {
content:"";
position:absolute;
width:100px;
height:200px;
left:100px;
border-radius:0 100px 100px 0;
}
.pie:nth-of-type(1):BEFORE,
.pie:nth-of-type(1):AFTER {
background-color:blue;
}
.pie:nth-of-type(2):AFTER,
.pie:nth-of-type(2):BEFORE {
background-color:green;
}
.pie:nth-of-type(3):AFTER,
.pie:nth-of-type(3):BEFORE {
background-color:red;
}
.pie:nth-of-type(4):AFTER,
.pie:nth-of-type(4):BEFORE {
background-color:orange;
}
.pie[data-start="30"] {
-moz-transform: rotate(30deg); /* Firefox */
-ms-transform: rotate(30deg); /* IE */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
transform:rotate(30deg);
}
.pie[data-start="60"] {
-moz-transform: rotate(60deg); /* Firefox */
-ms-transform: rotate(60deg); /* IE */
-webkit-transform: rotate(60deg); /* Safari and Chrome */
-o-transform: rotate(60deg); /* Opera */
transform:rotate(60deg);
}
.pie[data-start="100"] {
-moz-transform: rotate(100deg); /* Firefox */
-ms-transform: rotate(100deg); /* IE */
-webkit-transform: rotate(100deg); /* Safari and Chrome */
-o-transform: rotate(100deg); /* Opera */
transform:rotate(100deg);
}
.pie[data-value="30"]:BEFORE {
-moz-transform: rotate(31deg); /* Firefox */
-ms-transform: rotate(31deg); /* IE */
-webkit-transform: rotate(31deg); /* Safari and Chrome */
-o-transform: rotate(31deg); /* Opera */
transform:rotate(31deg);
}
.pie[data-value="40"]:BEFORE {
-moz-transform: rotate(41deg); /* Firefox */
-ms-transform: rotate(41deg); /* IE */
-webkit-transform: rotate(41deg); /* Safari and Chrome */
-o-transform: rotate(41deg); /* Opera */
transform:rotate(41deg);
}
.pie[data-value="260"]:BEFORE {
-moz-transform: rotate(260deg); /* Firefox */
-ms-transform: rotate(260deg); /* IE */
-webkit-transform: rotate(260deg); /* Safari and Chrome */
-o-transform: rotate(260deg); /* Opera */
transform:rotate(260deg);
}
JUST copy and paste this code to a fresh html page and see the changes