Circular menu with six equal divisions

Question

I am trying to achieve six divisions of circular menu in here

 (function(window) {

            'use strict';

            // class helper functions from bonzo https://github.com/ded/bonzo

            function classReg(className) {
                return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
            }

            // classList support for class management
            // altho to be fair, the api sucks because it won't accept multiple classes at once
            var hasClass, addClass, removeClass;

            if ('classList' in document.documentElement) {
                hasClass = function(elem, c) {
                    return elem.classList.contains(c);
                };
                addClass = function(elem, c) {
                    elem.classList.add(c);
                };
                removeClass = function(elem, c) {
                    elem.classList.remove(c);
                };
            } else {
                hasClass = function(elem, c) {
                    return classReg(c).test(elem.className);
                };
                addClass = function(elem, c) {
                    if (!hasClass(elem, c)) {
                        elem.className = elem.className + ' ' + c;
                    }
                };
                removeClass = function(elem, c) {
                    elem.className = elem.className.replace(classReg(c), ' ');
                };
            }

            function toggleClass(elem, c) {
                var fn = hasClass(elem, c) ? removeClass : addClass;
                fn(elem, c);
            }

            var classie = {
                // full names
                hasClass: hasClass,
                addClass: addClass,
                removeClass: removeClass,
                toggleClass: toggleClass,
                // short names
                has: hasClass,
                add: addClass,
                remove: removeClass,
                toggle: toggleClass
            };

            // transport
            if (typeof define === 'function' && define.amd) {
                // AMD
                define(classie);
            } else {
                // browser global
                window.classie = classie;
            }

        })(window);
        // EventListener | @jon_neal | //github.com/jonathantneal/EventListener
        !window.addEventListener && window.Element && (function() {
            function addToPrototype(name, method) {
                Window.prototype[name] = HTMLDocument.prototype[name] = Element.prototype[name] = method;
            }

            var registry = [];

            addToPrototype("addEventListener", function(type, listener) {
                var target = this;

                registry.unshift({
                    __listener: function(event) {
                        event.currentTarget = target;
                        event.pageX = event.clientX + document.documentElement.scrollLeft;
                        event.pageY = event.clientY + document.documentElement.scrollTop;
                        event.preventDefault = function() {
                            event.returnValue = false
                        };
                        event.relatedTarget = event.fromElement || null;
                        event.stopPropagation = function() {
                            event.cancelBubble = true
                        };
                        event.relatedTarget = event.fromElement || null;
                        event.target = event.srcElement || target;
                        event.timeStamp = +new Date;

                        listener.call(target, event);
                    },
                    listener: listener,
                    target: target,
                    type: type
                });

                this.attachEvent("on" + type, registry[0].__listener);
            });

            addToPrototype("removeEventListener", function(type, listener) {
                for (var index = 0, length = registry.length; index < length; ++index) {
                    if (registry[index].target == this && registry[index].type == type && registry[index].listener == listener) {
                        return this.detachEvent("on" + type, registry.splice(index, 1)[0].__listener);
                    }
                }
            });

            addToPrototype("dispatchEvent", function(eventObject) {
                try {
                    return this.fireEvent("on" + eventObject.type, eventObject);
                } catch (error) {
                    for (var index = 0, length = registry.length; index < length; ++index) {
                        if (registry[index].target == this && registry[index].type == eventObject.type) {
                            registry[index].call(this, eventObject);
                        }
                    }
                }
            });
        })();

* {
  position: relative;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
}

html,
body {
  height: 100%;
}

body {
  color: #fff;
}

.content-div {
  position: relative;
  margin-bottom: 3em;
  height: 15em;
  font-family: 'Lato', Arial, sans-serif;
}

.main_button {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 11;
  margin-top: -2.25em;
  margin-left: -2.25em;
  padding-top: 0;
  width: 4.5em;
  height: 4.5em;
  border: none;
  border-radius: 50%;
  background: none;
  background-color: #fff;
  color: green;
  text-align: center;
  font-weight: 700;
  font-size: 1.5em;
  text-transform: uppercase;
  cursor: pointer;
}

.csstransforms .main_wrapper {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 10;
  margin-top: -13em;
  margin-left: -13.5em;
  width: 27em;
  height: 27em;
  border-radius: 50%;
  background: transparent;
  opacity: 0;
  -webkit-transition: all .3s ease 0.3s;
  -moz-transition: all .3s ease 0.3s;
  transition: all .3s ease 0.3s;
  -webkit-transform: scale(0.1);
  -ms-transform: scale(0.1);
  -moz-transform: scale(0.1);
  transform: scale(0.1);
  pointer-events: none;
  overflow: hidden;
}

.csstransforms .main_wrapper:after {
  content: ".";
  display: block;
  font-size: 2em;
  width: 6.2em;
  height: 6.2em;
  position: absolute;
  left: 50%;
  margin-left: -3.1em;
  top: 50%;
  margin-top: -3.1em;
  border-radius: 50%;
  z-index: 10;
  color: transparent;
}

.csstransforms .opened-nav {
  border-radius: 50%;
  opacity: 1;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  pointer-events: auto;
}

.csstransforms .main_wrapper li {
  position: absolute;
  top: 50%;
  left: 50%;
  overflow: hidden;
  margin-top: -1.3em;
  margin-left: -10em;
  width: 10em;
  height: 10em;
  font-size: 1.5em;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
  -webkit-transform: rotate(75deg) skew(62deg);
  -moz-transform: rotate(75deg) skew(62deg);
  -ms-transform: rotate(75deg) skew(62deg);
  transform: rotate(75deg) skew(62deg);
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  pointer-events: none;
}

.csstransforms .main_wrapper li a {
  position: absolute;
  right: -7.25em;
  bottom: -7.25em;
  display: block;
  width: 14.5em;
  height: 14.5em;
  border-radius: 50%;
  background: green;
  background: -webkit-radial-gradient(transparent 35%, green 35%);
  background: -moz-radial-gradient(transparent 35%, green 35%);
  background: radial-gradient(transparent 35%, green 35%);
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-size: 1.2em;
  line-height: 2;
  -webkit-transform: skew(-62deg) rotate(-75deg) scale(1);
  -moz-transform: skew(-62deg) rotate(-75deg) scale(1);
  -ms-transform: skew(-62deg) rotate(-75deg) scale(1);
  transform: skew(-62deg) rotate(-75deg) scale(1);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  pointer-events: auto;
}

.csstransforms .main_wrapper li a span {
  position: relative;
  top: 1em;
  display: block;
  font-size: .5em;
  font-weight: 700;
  text-transform: uppercase;
}

.csstransforms .main_wrapper li a:hover,
.csstransforms .main_wrapper li a:active,
.csstransforms .main_wrapper li a:focus {
  background: -webkit-radial-gradient(transparent 35%, red 35%);
  background: -moz-radial-gradient(transparent 35%, red 35%);
  background: radial-gradient(transparent 35%, red 35%);
}

.csstransforms .opened-nav li {
  -webkit-transition: all .3s ease .3s;
  -moz-transition: all .3s ease .3s;
  transition: all .3s ease .3s;
}

.csstransforms .opened-nav li:first-child {
  -webkit-transform: skew(62deg);
  -moz-transform: skew(62deg);
  -ms-transform: skew(62deg);
  transform: skew(62deg);
}

.csstransforms .opened-nav li:nth-child(2) {
  -webkit-transform: rotate(30deg) skew(62deg);
  -moz-transform: rotate(30deg) skew(62deg);
  -ms-transform: rotate(30deg) skew(62deg);
  transform: rotate(60deg) skew(62deg);
}

.csstransforms .opened-nav li:nth-child(3) {
  -webkit-transform: rotate(60deg) skew(62deg);
  -moz-transform: rotate(60deg) skew(62deg);
  -ms-transform: rotate(60deg) skew(62deg);
  transform: rotate(120deg) skew(62deg);
}

.csstransforms .opened-nav li:nth-child(4) {
  -webkit-transform: rotate(90deg) skew(62deg);
  -moz-transform: rotate(90deg) skew(62deg);
  -ms-transform: rotate(90deg) skew(62deg);
  transform: rotate(180deg) skew(62deg);
}

.csstransforms .opened-nav li:nth-child(5) {
  -webkit-transform: rotate(120deg) skew(62deg);
  -moz-transform: rotate(120deg) skew(62deg);
  -ms-transform: rotate(120deg) skew(62deg);
  transform: rotate(240deg) skew(62deg);
}

.csstransforms .opened-nav li:nth-child(6) {
  -webkit-transform: rotate(150deg) skew(62deg);
  -moz-transform: rotate(150deg) skew(62deg);
  -ms-transform: rotate(150deg) skew(62deg);
  transform: rotate(300deg) skew(62deg);
}

.no-csstransforms .main_wrapper {
  overflow: hidden;
  margin: 10em auto;
  padding: .5em;
  text-align: center;
}

.no-csstransforms .main_wrapper ul {
  display: inline-block;
}

.no-csstransforms .main_wrapper li {
  float: left;
  width: 5em;
  height: 5em;
  background-color: #fff;
  text-align: center;
  font-size: 1em;
  line-height: 5em;
}

.no-csstransforms .main_wrapper li a {
  display: block;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.no-csstransforms .main_wrapper li a:hover,
.no-csstransforms .main_wrapper li a:active,
.no-csstransforms .main_wrapper li a:focus {
  background-color: #f8f8f8;
}

.no-csstransforms .main_wrapper li.active a {
  background-color: #6F325C;
  color: #fff;
}

.no-csstransforms .main_button {
  display: none;
}

@media only screen and (max-width: 620px) {
  .no-csstransforms li {
    width: 4em;
    height: 4em;
    line-height: 4em;
  }
}

@media only screen and (max-width: 500px) {
  .no-ccstransforms .main_wrapper {
    padding: .5em;
  }
  .no-csstransforms .main_wrapper li {
    width: 4em;
    height: 4em;
    font-size: .9em;
    line-height: 4em;
  }
}

@media only screen and (max-width: 480px) {
  .csstransforms .main_wrapper {
    font-size: .68em;
  }
  .main_button {
    font-size: 1em;
  }
}

@media only screen and (max-width:420px) {
  .no-csstransforms .main_wrapper li {
    width: 100%;
    height: 3em;
    line-height: 3em;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.js"></script>
<div class="container">
  <div class="content-div">
    <button class="main_button" id="main_button">Content</button>
    <div class="main_wrapper opened-nav" id="main_wrapper">
      <ul>
        <li><a href="#"><span>PIE 1</span></a></li>
        <li><a href="#"><span>PIE 2</span></a></li>
        <li><a href="#"><span>PIE 3</span></a></li>
        <li><a href="#"><span>PIE 4</span></a></li>
        <li><a href="#"><span>PIE 5</span></a></li>
        <li><a href="#"><span>PIE 6</span></a></li>
      </ul>
    </div>
  </div>
</div>

I couldn't adjust the size of each pie, as you can see huge gap in between each pie.

Please let me know how to adjust the size of pie?

Answer 1

Here is another idea based on this previous answer where you have CSS variables to easily control the gap and the size of your elements:

.palette {
  --g: 10px; /* The gap between shapes*/
  --s: 80px; /* the size*/
  height: 300px;
  width: 300px;
  position: relative;
  display: block;
  margin:auto;
  overflow: hidden;
}

.palette>* {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: var(--s) solid red;
  border-radius: 50%;
  clip-path: polygon( 
   calc(50% + var(--g)/2) 50%, 
   calc(50% + var(--g)/2) 0%, 
   100% 0%, 
   100% calc(21.13% - var(--g)/2), 
   50% calc(50% - var(--g)/2));
}

.palette>*:nth-child(1) {
  transform: rotate(72deg);
}

.palette>*:nth-child(2) {
  transform: rotate(144deg);
}

.palette>*:nth-child(3) {
  transform: rotate(-72deg);
}

.palette>*:nth-child(4) {
  transform: rotate(-144deg);
}

.palette a {
  color: #fff;
  display: block;
  text-align: center;
  transform: translate(42%, calc(-1*var(--s)/2)) rotate(35deg);
  font-size: 20px;
}

.palette *:hover {
  border-color:blue;
}

<div class="palette">
  <div><a href="">link</a></div>
  <div><a href="">link</a></div>
  <div><a href="">link</a></div>
  <div><a href="">link</a></div>
  <div><a href="">link</a></div>
  <div><a href="">link</a></div>
</div>