HTML CSS rounded menu

Question

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.

another not duplicate but helpful https://stackoverflow.com/questions/48841773/call-a-function-on-a-div-with-different-borders/48841974#48841974 — Temani Afif, Feb 18 '18 at 13:21

manneJan89 · Accepted Answer · 2018-02-18T13:55:55.663

-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.

edited Feb 18 '18 at 13:55

answered Feb 18 '18 at 13:18

manneJan89

1,004
8
27

Thanks, that's it – Mumar21 Feb 18 '18 at 13:29
You are required to post your code and markup here, within your answer, not a plunkr or any other outside source. https://stackoverflow.com/help/how-to-answer – Rob Feb 18 '18 at 13:51
Thanks @Rob, updated the answer. The only reason for the plunkr is that is much easier to see what the code produces with a ui. – manneJan89 Feb 18 '18 at 13:56
You can do that to compliment your code but not as a sole source. – Rob Feb 18 '18 at 13:58
Makes sense. Thanks. – manneJan89 Feb 18 '18 at 14:03

score -2 · Answer 2 · answered Feb 18 '18 at 13:07

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

HTML CSS rounded menu

2 Answers2