Circular menu with six equal divisions - html

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><span>PIE 1</span></li>
<li><span>PIE 2</span></li>
<li><span>PIE 3</span></li>
<li><span>PIE 4</span></li>
<li><span>PIE 5</span></li>
<li><span>PIE 6</span></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>link</div>
<div>link</div>
<div>link</div>
<div>link</div>
<div>link</div>
<div>link</div>
</div>