CSS - Стоп, пересекающий круг - PullRequest
Новая
       3

CSS - Стоп, пересекающий круг

0 голосов
/ 28 августа 2018

Может кто-нибудь сказать мне, как остановить эту линию от пересечения круга? this

Я хочу вот так. то есть нет линии внутри круга.

this

Фон (в данном случае тега li) будет прозрачным. 

#project-wrapper {
  width: 100%;
  /* Messing with positioning element on page */
  /* min-height or top margin allows for full use */
  /* min-height:600px;
	 */
  margin: 420px 0 0 0;
  padding: 0;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}

#orbital-menu {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  z-index: 8900 !important;
  list-style-type: none;
  cursor: pointer;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  -webkit-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  transition: all 250ms linear;
}

#orbital-menu ul {
  list-style-type: none !important;
  /* -webkit-transition: all 650ms linear;
	 -ms-transition: all 650ms linear;
	 -moz-transition: all 650ms linear;
	 -o-transition: all 650ms linear;
	 transition: all 650ms linear;*/
}

#orbital-menu ul.orb-master {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  position: relative !important;
  clear: both !important;
  height: 140px;
  width: 140px;
  margin: -70px 0 0 -70px;
  z-index: -1 !important;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  /*-webkit-transition: all 650ms ease-out;
	 -ms-transition: all 650ms ease-out;
	 -moz-transition: all 650ms ease-out;
	 -o-transition: all 650ms ease-out;
	 transition: all 650ms ease-out;*/
  /* NAME: ORBITAL-BLOCK-1 */
  /* STATUS: BEGIN */
}

#orbital-menu ul.orb-master li.orb {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /*opacity: 0;*/
  opacity: 1;
  clear: both !important;
  width: 70px;
  height: 70px;
  margin: calc(70px * -0.5) 0 0 calc(70px * -0.5);
  background-color: transparent;
  border: 2px solid #af6a79;
  z-index: 8900 !important;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  /*-webkit-transition: all 550ms ease-in-out;
	 -ms-transition: all 550ms ease-in-out;
	 -moz-transition: all 550ms ease-in-out;
	 -o-transition: all 550ms ease-in-out;
	 transition: all 550ms ease-in-out;*/
}

#orbital-menu ul.orb-master li.orb+.orb {
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
}

#orbital-menu ul.orb-master li {
  border: 10px solid #ff326a;
  z-index: 8950 !important;
  -webkit-animation-delay: 1250ms !important;
  -ms-animation-delay: 1250ms !important;
  -moz-animation-delay: 1250ms !important;
  -o-animation-delay: 1250ms !important;
  animation-delay: 1250ms !important;
}

#orbital-menu ul.orb-master li ul.first-satellite-orb[data-children="4"] li:nth-of-type(1) {
  -webkit-animation-delay: 850ms !important;
  -ms-animation-delay: 850ms !important;
  -moz-animation-delay: 850ms !important;
  -o-animation-delay: 850ms !important;
  animation-delay: 850ms !important;
  -webkit-transform: rotate(90deg) translate(65px) !important;
  -ms-transform: rotate(90deg) translate(65px) !important;
  -moz-transform: rotate(90deg) translate(65px) !important;
  -o-transform: rotate(90deg) translate(65px) !important;
  transform: rotate(90deg) translate(65px) !important;
}

#orbital-menu ul.orb-master li ul.first-satellite-orb[data-children="4"] li:nth-of-type(2) {
  -webkit-animation-delay: 850ms !important;
  -ms-animation-delay: 850ms !important;
  -moz-animation-delay: 850ms !important;
  -o-animation-delay: 850ms !important;
  animation-delay: 850ms !important;
  -webkit-transform: rotate(180deg) translate(65px) !important;
  -ms-transform: rotate(180deg) translate(65px) !important;
  -moz-transform: rotate(180deg) translate(65px) !important;
  -o-transform: rotate(180deg) translate(65px) !important;
  transform: rotate(180deg) translate(65px) !important;
}

#orbital-menu ul.orb-master li ul.first-satellite-orb[data-children="4"] li:nth-of-type(3) {
  -webkit-animation-delay: 850ms !important;
  -ms-animation-delay: 850ms !important;
  -moz-animation-delay: 850ms !important;
  -o-animation-delay: 850ms !important;
  animation-delay: 850ms !important;
  -webkit-transform: rotate(270deg) translate(65px) !important;
  -ms-transform: rotate(270deg) translate(65px) !important;
  -moz-transform: rotate(270deg) translate(65px) !important;
  -o-transform: rotate(270deg) translate(65px) !important;
  transform: rotate(270deg) translate(65px) !important;
}

#orbital-menu ul.orb-master li ul.first-satellite-orb[data-children="4"] li:nth-of-type(4) {
  -webkit-animation-delay: 850ms !important;
  -ms-animation-delay: 850ms !important;
  -moz-animation-delay: 850ms !important;
  -o-animation-delay: 850ms !important;
  animation-delay: 850ms !important;
  -webkit-transform: rotate(360deg) translate(65px) !important;
  -ms-transform: rotate(360deg) translate(65px) !important;
  -moz-transform: rotate(360deg) translate(65px) !important;
  -o-transform: rotate(360deg) translate(65px) !important;
  transform: rotate(360deg) translate(65px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(1) {
  -webkit-transform: rotate(90deg) translate(140px) !important;
  -ms-transform: rotate(90deg) translate(140px) !important;
  -moz-transform: rotate(90deg) translate(140px) !important;
  -o-transform: rotate(90deg) translate(140px) !important;
  transform: rotate(90deg) translate(140px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(1).satellite-orb {
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  -webkit-transform: rotate(90deg) translate(65px) !important;
  -ms-transform: rotate(90deg) translate(65px) !important;
  -moz-transform: rotate(90deg) translate(65px) !important;
  -o-transform: rotate(90deg) translate(65px) !important;
  transform: rotate(90deg) translate(65px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(1).satellite-orb {
  opacity: 1;
  display: block !important;
  -webkit-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -ms-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -moz-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -o-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(2) {
  -webkit-transform: rotate(180deg) translate(140px) !important;
  -ms-transform: rotate(180deg) translate(140px) !important;
  -moz-transform: rotate(180deg) translate(140px) !important;
  -o-transform: rotate(180deg) translate(140px) !important;
  transform: rotate(180deg) translate(140px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(2).satellite-orb {
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  -webkit-transform: rotate(180deg) translate(65px) !important;
  -ms-transform: rotate(180deg) translate(65px) !important;
  -moz-transform: rotate(180deg) translate(65px) !important;
  -o-transform: rotate(180deg) translate(65px) !important;
  transform: rotate(180deg) translate(65px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(2).satellite-orb {
  opacity: 1;
  display: block !important;
  -webkit-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -ms-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -moz-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -o-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(3) {
  -webkit-transform: rotate(270deg) translate(140px) !important;
  -ms-transform: rotate(270deg) translate(140px) !important;
  -moz-transform: rotate(270deg) translate(140px) !important;
  -o-transform: rotate(270deg) translate(140px) !important;
  transform: rotate(270deg) translate(140px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(3).satellite-orb {
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  -webkit-transform: rotate(270deg) translate(65px) !important;
  -ms-transform: rotate(270deg) translate(65px) !important;
  -moz-transform: rotate(270deg) translate(65px) !important;
  -o-transform: rotate(270deg) translate(65px) !important;
  transform: rotate(270deg) translate(65px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(3).satellite-orb {
  opacity: 1;
  display: block !important;
  -webkit-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -ms-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -moz-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -o-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(4) {
  -webkit-transform: rotate(360deg) translate(140px) !important;
  -ms-transform: rotate(360deg) translate(140px) !important;
  -moz-transform: rotate(360deg) translate(140px) !important;
  -o-transform: rotate(360deg) translate(140px) !important;
  transform: rotate(360deg) translate(140px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(4).satellite-orb {
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  -webkit-transform: rotate(360deg) translate(65px) !important;
  -ms-transform: rotate(360deg) translate(65px) !important;
  -moz-transform: rotate(360deg) translate(65px) !important;
  -o-transform: rotate(360deg) translate(65px) !important;
  transform: rotate(360deg) translate(65px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(4).satellite-orb {
  opacity: 1;
  display: block !important;
  -webkit-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -ms-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -moz-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -o-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
}

#orbital-menu ul.orb-master[data-children="4"] {
  /*opacity: 0.75;*/
  opacity: 1;
}

#orbital-menu ul.orb-master[data-children="4"] li {
  /*opacity: 0.5;*/
  opacity: 1;
}

#orbital-menu:before,
#orbital-menu:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  clear: both !important;
  cursor: pointer;
  overflow: visible;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  /*-webkit-transition: all 550ms linear;
	 -ms-transition: all 550ms linear;
	 -moz-transition: all 550ms linear;
	 -o-transition: all 550ms linear;
	 transition: all 550ms linear;*/
}

#orbital-menu,
#orbital-menu:focus {
  /* things won't work in IE 10 without this declaration */
}

#orbital-menu:before {
  /*height: 140px;
	 width: 140px;
	 margin: -70px 0 0 -70px;*/
  height: 125px;
  width: 125px;
  margin: -65px 0 0 -63px;
  border: 2px solid #a06270;
  z-index: -1 !important;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  /*background: url('/wp-content/uploads/2018/08/map.png');
	 background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;*/
}

#orbital-menu {
  width: 280px;
  height: 280px;
  margin: -145px 0 0 -143px;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  border: 2px solid #af6a79;
}


/*ul.orb-master span {
    position: absolute;
    top: 130px;
    font-size: 10px;
    font-weight: bold;
    text-align: justify;
    left: 45px;
}*/

ul.orb-master span {
  position: relative;
  bottom: 0;
  top: 137px;
  left: 0;
  right: 0;
  font-weight: bold;
  font-size: 10px;
  margin: 0 auto;
  width: 100px;
  display: block;
  color: #9a9a9a;
  line-height: 12px;
}

nav#orbital-menu ul.orb-master {
  padding: 0;
  text-align: center;
}

#orbital-menu>ul>li:nth-child(2) i {
  transform: rotate(-90deg) !important;
  position: relative;
  right: 0;
  left: 12px;
  bottom: 0;
  top: 8px;
  margin: 0 auto;
  text-align: center;
  font-size: 30px;
  color: #9a9a9a;
}

#orbital-menu>ul>li:nth-child(2) i b {
  text-align: center;
  font-size: 12px;
  display: block;
  top: 24px;
  position: relative;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: capitalize;
}

#orbital-menu>ul>li:nth-child(3) i {
  transform: rotate(-180deg) !important;
  position: relative;
  right: 0;
  left: -2px;
  bottom: 0;
  top: -7px;
  margin: 0 auto;
  text-align: center;
  font-size: 30px;
  color: #9a9a9a;
}

#orbital-menu>ul>li:nth-child(3) i b {
  text-align: center;
  font-size: 12px;
  display: block;
  top: 24px;
  position: relative;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: capitalize;
}

#orbital-menu>ul>li:nth-child(4) i {
  transform: rotate(-270deg) !important;
  position: relative;
  right: 0;
  left: -12px;
  bottom: 0;
  top: 8px;
  margin: 0 auto;
  text-align: center;
  font-size: 30px;
  color: #9a9a9a;
}

#orbital-menu>ul>li:nth-child(4) i b {
  text-align: center;
  font-size: 12px;
  display: block;
  top: 25px;
  position: relative;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: capitalize;
}

#orbital-menu>ul>li:nth-child(5) i {
  transform: rotate(0deg) !important;
  position: relative;
  right: 0;
  left: 0;
  bottom: 0;
  top: 22px;
  margin: 0 auto;
  text-align: center;
  font-size: 30px;
  color: #9a9a9a;
}

#orbital-menu>ul>li:nth-child(5) i b {
  text-align: center;
  font-size: 12px;
  display: block;
  top: 25px;
  position: relative;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: capitalize;
}

ul.orb-master li.orb.orbturnred {
  background: #b30122 !important;
  border: 2px solid #b30122 !important;
}

ul.orb-master li.orb.orbturnred i {
  color: #fff !important;
  ;
  top: 20px !important;
}

#orbital-menu>ul>li[name="pm"].orb.orbturnred i {
  top: -7px !important;
  left: -2px;
}

#orbital-menu>ul>li[name="pa"].orb.orbturnred i {
  left: 12px;
  top: 8px !important;
}

#orbital-menu>ul>li[name="ps"].orb.orbturnred i {
  left: -12px;
  top: 8px !important;
}

ul.orb-master {
  list-style-type: none !important;
  list-style: none;
}

nav#orbital-menu>i {
  position: absolute;
  top: 40%;
  left: 40%;
  font-size: 60px;
  clear: both !important;
  cursor: pointer;
  overflow: visible;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  /* -webkit-transition: all 550ms linear;
    -ms-transition: all 550ms linear;
    -moz-transition: all 550ms linear;
    -o-transition: all 550ms linear;
    transition: all 550ms linear;*/
}

ul.orb-master.orbturnred {
  /* background-color: #b30122 !important;
    border: none !important;*/
}

ul.orb-master.orbturnred span {
  color: #fff !important;
  /*     top: 145px; */
}

i.fa.fa-map.icoturnwhite {
  color: white;
}

ul.orb-master li {
  /*background-image: url(https://mentoreurope.com/wp-content/uploads/2018/08/Cogs_edited-with-gradient.jpg);*/
  background-repeat: repeat;
  background-position: center;
  /*background: #fff !important;*/
}

div#project-wrapper {
  border: 2px dashed gray;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
  height: 470px;
  width: 470px;
}

#project-wrapper>span:nth-child(1) {
  position: absolute;
  left: calc(50% - 42px);
  top: -28px;
  color: #9a9a9a;
  font-style: italic;
  font-weight: 700;
  font-family: initial;
  font-size: 18px;
}

#project-wrapper>span:nth-child(2) {
  position: absolute;
  top: 50%;
  left: -60px;
  color: #9a9a9a;
  font-style: italic;
  font-weight: 700;
  font-family: initial;
  font-size: 18px;
}

#project-wrapper>span:nth-child(3) {
  position: absolute;
  top: 50%;
  right: -60px;
  color: #9a9a9a;
  font-style: italic;
  font-weight: 700;
  font-family: initial;
  font-size: 18px;
}

#project-wrapper>span:nth-child(4) {
  position: absolute;
  bottom: -30px;
  left: calc(50% - 25px);
  color: #9a9a9a;
  font-style: italic;
  font-weight: 700;
  font-family: initial;
  font-size: 18px;
}

#orbital-menu>ul>li[name="pr"].orb.orbturnred i {
  top: 22px !important;
}

nav#orbital-menu.middleorbturnred:before {
  background-color: #b30122 !important;
  border: 2px solid #b30122 !important;
}

#orbital-menu:before {
  transition: all 250ms linear;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css?ver=4.9.8" rel="stylesheet" />
<div id="project-wrapper"><span>Your Strategy</span><span>Review</span><span>Design</span><span>Delivery</span>
  <nav id="orbital-menu" class=""><i class="fa fa-map"></i>
    <ul class="orb-master" data-children="4"><span>MENTOR BLUEPRINT</span>
      <li class="orb" name="pa"> <i class="fa fa-briefcase" aria-hidden="true"><b>Program Acceleration</b></i> </li>
      <li class="orb" name="pm"> <i class="fa fa-briefcase" aria-hidden="true"><b>Portfolio Management</b></i> </li>
      <li class="orb" name="ps"> <i class="fa fa-briefcase" aria-hidden="true"><b>Program Setup</b></i> </li>
      <li class="orb" name="pr"> <i class="fa fa-briefcase" aria-hidden="true"><b>Program Review</b></i> </li>
    </ul>
  </nav>
</div>

Ответы [ 2 ]

0 голосов
/ 29 августа 2018

Это было тяжелое печенье, но мне понравилось! Мне пришлось изменить некоторые из существующих CSS, переместив границу большого круга в псевдоэлемент #orbital-menu:after и настроив поля.

transform-origin не требуется, поскольку вы не делаете повороты на #orbital-menu

#orbital-menu {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 280px;
    height: 280px;
    margin: -140px 0 0 -140px;
    z-index: 8900 !important;
    cursor: pointer;
    box-shadow: none;
    transition: all 250ms linear;
}

#orbital-menu:after {
    border-radius: 50%;
    border: 2px solid #af6a79;
    height: 280px;
    width: 280px;
    left: 0;
    top: 0;
    clip-path: polygon(0 0, 34% 0, 50% 10%, 66% 0, 100% 0, 100% 34%, 90% 50%, 100% 66%, 100% 100%, 66% 100%, 50% 90%, 34% 100%, 0 100%, 0 66%, 10% 50%, 0 34%);
}

Хитрость здесь в том, что clip-path свойство. Он изменит элемент после применения границы. Я использовал создатель пути обрезки , чтобы сгенерировать многоугольник, чтобы вырезать границу, где он пересекается с другими кругами. Это не могло быть применено к самому элементу, иначе дочерние элементы orb тоже были бы обрезаны.

enter image description here

Я также очистил ваш #project-wrapper > span CSS, чтобы уменьшить избыточность (и вы начали): 

#project-wrapper>span {
  position: absolute;
  color: #9a9a9a;
  font: italic 700 18px initial;
}

#project-wrapper>span:nth-child(1) {
  left: calc(50% - 42px);
  top: -28px;
}

#project-wrapper>span:nth-child(2) {
  top: 50%;
  left: -60px;
}

#project-wrapper>span:nth-child(3) {
  top: 50%;
  right: -60px;
}

#project-wrapper>span:nth-child(4) {
  bottom: -30px;
  left: calc(50% - 25px);
}

И я понимаю, что у вас waaaayy слишком много других избыточных CSS, которые вы можете очистить:

  • Извлечение всех общих свойств в :nth-of-type селектор
  • Удаление всех префиксных свойств, к которым уже применяется большинство браузеров (ссылка caniuse.com ) 

body {
  background-image: url(https://mentoreurope.com/wp-content/uploads/2018/08/Cogs_edited-with-gradient.jpg);
  color: #797979;
}

#project-wrapper {
  width: 100%;
  /* Messing with positioning element on page */
  /* min-height or top margin allows for full use */
  /* min-height:600px;
	 */
  margin: 420px 0 0 0;
  padding: 0;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}

#orbital-menu {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 280px;
  margin: -140px 0 0 -140px;
  z-index: 8900 !important;
  cursor: pointer;
  box-shadow: none;
  transition: all 250ms linear;
}

#orbital-menu ul {
  list-style-type: none !important;
  /* -webkit-transition: all 650ms linear;
	 -ms-transition: all 650ms linear;
	 -moz-transition: all 650ms linear;
	 -o-transition: all 650ms linear;
	 transition: all 650ms linear;*/
}

#orbital-menu ul.orb-master {
  position: absolute;
  top: 50%;
  left: 50%;
  position: relative !important;
  clear: both !important;
  height: 140px;
  width: 140px;
  margin: -70px 0 0 -70px;
  z-index: -1 !important;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  /*-webkit-transition: all 650ms ease-out;
	 -ms-transition: all 650ms ease-out;
	 -moz-transition: all 650ms ease-out;
	 -o-transition: all 650ms ease-out;
	 transition: all 650ms ease-out;*/
  /* NAME: ORBITAL-BLOCK-1 */
  /* STATUS: BEGIN */
}

#orbital-menu ul.orb-master li.orb {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /*opacity: 0;*/
  opacity: 1;
  clear: both !important;
  width: 70px;
  height: 70px;
  margin: calc(70px * -0.5) 0 0 calc(70px * -0.5);
  background-color: transparent;
  border: 2px solid #af6a79;
  z-index: 8900 !important;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  /*-webkit-transition: all 550ms ease-in-out;
	 -ms-transition: all 550ms ease-in-out;
	 -moz-transition: all 550ms ease-in-out;
	 -o-transition: all 550ms ease-in-out;
	 transition: all 550ms ease-in-out;*/
}

#orbital-menu ul.orb-master li.orb+.orb {
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
}

#orbital-menu ul.orb-master li {
  border: 10px solid #ff326a;
  z-index: 8950 !important;
  -webkit-animation-delay: 1250ms !important;
  -ms-animation-delay: 1250ms !important;
  -moz-animation-delay: 1250ms !important;
  -o-animation-delay: 1250ms !important;
  animation-delay: 1250ms !important;
}

#orbital-menu ul.orb-master li ul.first-satellite-orb[data-children="4"] li:nth-of-type(1) {
  -webkit-animation-delay: 850ms !important;
  -ms-animation-delay: 850ms !important;
  -moz-animation-delay: 850ms !important;
  -o-animation-delay: 850ms !important;
  animation-delay: 850ms !important;
  -webkit-transform: rotate(90deg) translate(65px) !important;
  -ms-transform: rotate(90deg) translate(65px) !important;
  -moz-transform: rotate(90deg) translate(65px) !important;
  -o-transform: rotate(90deg) translate(65px) !important;
  transform: rotate(90deg) translate(65px) !important;
}

#orbital-menu ul.orb-master li ul.first-satellite-orb[data-children="4"] li:nth-of-type(2) {
  -webkit-animation-delay: 850ms !important;
  -ms-animation-delay: 850ms !important;
  -moz-animation-delay: 850ms !important;
  -o-animation-delay: 850ms !important;
  animation-delay: 850ms !important;
  -webkit-transform: rotate(180deg) translate(65px) !important;
  -ms-transform: rotate(180deg) translate(65px) !important;
  -moz-transform: rotate(180deg) translate(65px) !important;
  -o-transform: rotate(180deg) translate(65px) !important;
  transform: rotate(180deg) translate(65px) !important;
}

#orbital-menu ul.orb-master li ul.first-satellite-orb[data-children="4"] li:nth-of-type(3) {
  -webkit-animation-delay: 850ms !important;
  -ms-animation-delay: 850ms !important;
  -moz-animation-delay: 850ms !important;
  -o-animation-delay: 850ms !important;
  animation-delay: 850ms !important;
  -webkit-transform: rotate(270deg) translate(65px) !important;
  -ms-transform: rotate(270deg) translate(65px) !important;
  -moz-transform: rotate(270deg) translate(65px) !important;
  -o-transform: rotate(270deg) translate(65px) !important;
  transform: rotate(270deg) translate(65px) !important;
}

#orbital-menu ul.orb-master li ul.first-satellite-orb[data-children="4"] li:nth-of-type(4) {
  -webkit-animation-delay: 850ms !important;
  -ms-animation-delay: 850ms !important;
  -moz-animation-delay: 850ms !important;
  -o-animation-delay: 850ms !important;
  animation-delay: 850ms !important;
  -webkit-transform: rotate(360deg) translate(65px) !important;
  -ms-transform: rotate(360deg) translate(65px) !important;
  -moz-transform: rotate(360deg) translate(65px) !important;
  -o-transform: rotate(360deg) translate(65px) !important;
  transform: rotate(360deg) translate(65px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(1) {
  -webkit-transform: rotate(90deg) translate(140px) !important;
  -ms-transform: rotate(90deg) translate(140px) !important;
  -moz-transform: rotate(90deg) translate(140px) !important;
  -o-transform: rotate(90deg) translate(140px) !important;
  transform: rotate(90deg) translate(140px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(1).satellite-orb {
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  -webkit-transform: rotate(90deg) translate(65px) !important;
  -ms-transform: rotate(90deg) translate(65px) !important;
  -moz-transform: rotate(90deg) translate(65px) !important;
  -o-transform: rotate(90deg) translate(65px) !important;
  transform: rotate(90deg) translate(65px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(1).satellite-orb {
  opacity: 1;
  display: block !important;
  -webkit-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -ms-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -moz-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -o-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(2) {
  -webkit-transform: rotate(180deg) translate(140px) !important;
  -ms-transform: rotate(180deg) translate(140px) !important;
  -moz-transform: rotate(180deg) translate(140px) !important;
  -o-transform: rotate(180deg) translate(140px) !important;
  transform: rotate(180deg) translate(140px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(2).satellite-orb {
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  -webkit-transform: rotate(180deg) translate(65px) !important;
  -ms-transform: rotate(180deg) translate(65px) !important;
  -moz-transform: rotate(180deg) translate(65px) !important;
  -o-transform: rotate(180deg) translate(65px) !important;
  transform: rotate(180deg) translate(65px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(2).satellite-orb {
  opacity: 1;
  display: block !important;
  -webkit-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -ms-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -moz-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -o-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(3) {
  -webkit-transform: rotate(270deg) translate(140px) !important;
  -ms-transform: rotate(270deg) translate(140px) !important;
  -moz-transform: rotate(270deg) translate(140px) !important;
  -o-transform: rotate(270deg) translate(140px) !important;
  transform: rotate(270deg) translate(140px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(3).satellite-orb {
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  -webkit-transform: rotate(270deg) translate(65px) !important;
  -ms-transform: rotate(270deg) translate(65px) !important;
  -moz-transform: rotate(270deg) translate(65px) !important;
  -o-transform: rotate(270deg) translate(65px) !important;
  transform: rotate(270deg) translate(65px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(3).satellite-orb {
  opacity: 1;
  display: block !important;
  -webkit-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -ms-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -moz-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -o-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(4) {
  -webkit-transform: rotate(360deg) translate(140px) !important;
  -ms-transform: rotate(360deg) translate(140px) !important;
  -moz-transform: rotate(360deg) translate(140px) !important;
  -o-transform: rotate(360deg) translate(140px) !important;
  transform: rotate(360deg) translate(140px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(4).satellite-orb {
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  -webkit-transform: rotate(360deg) translate(65px) !important;
  -ms-transform: rotate(360deg) translate(65px) !important;
  -moz-transform: rotate(360deg) translate(65px) !important;
  -o-transform: rotate(360deg) translate(65px) !important;
  transform: rotate(360deg) translate(65px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(4).satellite-orb {
  opacity: 1;
  display: block !important;
  -webkit-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -ms-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -moz-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -o-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
}

#orbital-menu ul.orb-master[data-children="4"] {
  /*opacity: 0.75;*/
  opacity: 1;
}

#orbital-menu ul.orb-master[data-children="4"] li {
  /*opacity: 0.5;*/
  opacity: 1;
}

#orbital-menu:before,
#orbital-menu:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  clear: both !important;
  cursor: pointer;
  overflow: visible;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  /*-webkit-transition: all 550ms linear;
	 -ms-transition: all 550ms linear;
	 -moz-transition: all 550ms linear;
	 -o-transition: all 550ms linear;
	 transition: all 550ms linear;*/
}

#orbital-menu,
#orbital-menu:focus {
  /* things won't work in IE 10 without this declaration */
}

#orbital-menu:before {
  /*height: 140px;
	 width: 140px;
	 margin: -70px 0 0 -70px;*/
  height: 125px;
  width: 125px;
  margin: -65px 0 0 -63px;
  border: 2px solid #a06270;
  z-index: -1 !important;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  transition: all 250ms linear;
  /*background: url('/wp-content/uploads/2018/08/map.png');
	 background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;*/
}

#orbital-menu:after {
  border-radius: 50%;
  border: 2px solid #af6a79;
  height: 280px;
  width: 280px;
  left: 0;
  top: 0;
  clip-path: polygon(0 0, 34% 0, 50% 10%, 66% 0, 100% 0, 100% 34%, 90% 50%, 100% 66%, 100% 100%, 66% 100%, 50% 90%, 34% 100%, 0 100%, 0 66%, 10% 50%, 0 34%);
}

ul.orb-master span {
  position: relative;
  bottom: 0;
  top: 137px;
  left: 0;
  right: 0;
  font-weight: bold;
  font-size: 10px;
  margin: 0 auto;
  width: 100px;
  display: block;
  color: #9a9a9a;
  line-height: 12px;
}

nav#orbital-menu ul.orb-master {
  padding: 0;
  text-align: center;
}

#orbital-menu>ul>li:nth-child(2) i {
  transform: rotate(-90deg) !important;
  position: relative;
  right: 0;
  left: 12px;
  bottom: 0;
  top: 8px;
  margin: 0 auto;
  text-align: center;
  font-size: 30px;
  color: #9a9a9a;
}

#orbital-menu>ul>li:nth-child(2) i b {
  text-align: center;
  font-size: 12px;
  display: block;
  top: 24px;
  position: relative;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: capitalize;
}

#orbital-menu>ul>li:nth-child(3) i {
  transform: rotate(-180deg) !important;
  position: relative;
  right: 0;
  left: -2px;
  bottom: 0;
  top: -7px;
  margin: 0 auto;
  text-align: center;
  font-size: 30px;
  color: #9a9a9a;
}

#orbital-menu>ul>li:nth-child(3) i b {
  text-align: center;
  font-size: 12px;
  display: block;
  top: 24px;
  position: relative;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: capitalize;
}

#orbital-menu>ul>li:nth-child(4) i {
  transform: rotate(-270deg) !important;
  position: relative;
  right: 0;
  left: -12px;
  bottom: 0;
  top: 8px;
  margin: 0 auto;
  text-align: center;
  font-size: 30px;
  color: #9a9a9a;
}

#orbital-menu>ul>li:nth-child(4) i b {
  text-align: center;
  font-size: 12px;
  display: block;
  top: 25px;
  position: relative;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: capitalize;
}

#orbital-menu>ul>li:nth-child(5) i {
  transform: rotate(0deg) !important;
  position: relative;
  right: 0;
  left: 0;
  bottom: 0;
  top: 22px;
  margin: 0 auto;
  text-align: center;
  font-size: 30px;
  color: #9a9a9a;
}

#orbital-menu>ul>li:nth-child(5) i b {
  text-align: center;
  font-size: 12px;
  display: block;
  top: 25px;
  position: relative;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: capitalize;
}

ul.orb-master li.orb.orbturnred {
  background: #b30122 !important;
  border: 2px solid #b30122 !important;
}

ul.orb-master li.orb.orbturnred i {
  color: #fff !important;
  ;
  top: 20px !important;
}

#orbital-menu>ul>li[name="pm"].orb.orbturnred i {
  top: -7px !important;
  left: -2px;
}

#orbital-menu>ul>li[name="pa"].orb.orbturnred i {
  left: 12px;
  top: 8px !important;
}

#orbital-menu>ul>li[name="ps"].orb.orbturnred i {
  left: -12px;
  top: 8px !important;
}

ul.orb-master {
  list-style-type: none !important;
  list-style: none;
}

nav#orbital-menu>i {
  position: absolute;
  top: 40%;
  left: 40%;
  font-size: 60px;
  clear: both !important;
  cursor: pointer;
  overflow: visible;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  /* -webkit-transition: all 550ms linear;
    -ms-transition: all 550ms linear;
    -moz-transition: all 550ms linear;
    -o-transition: all 550ms linear;
    transition: all 550ms linear;*/
}

ul.orb-master.orbturnred {
  /* background-color: #b30122 !important;
    border: none !important;*/
}

ul.orb-master.orbturnred span {
  color: #fff !important;
  /*     top: 145px; */
}

i.fa.fa-map.icoturnwhite {
  color: white;
}

ul.orb-master li {
  /*background-image: url(https://mentoreurope.com/wp-content/uploads/2018/08/Cogs_edited-with-gradient.jpg);*/
  background-repeat: repeat;
  background-position: center;
  /*background: #fff !important;*/
}

div#project-wrapper {
  border: 2px dashed gray;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
  height: 470px;
  width: 470px;
}

#project-wrapper>span {
  position: absolute;
  color: #9a9a9a;
  font: italic 700 18px initial;
}

#project-wrapper>span:nth-child(1) {
  left: calc(50% - 42px);
  top: -28px;
}

#project-wrapper>span:nth-child(2) {
  top: 50%;
  left: -60px;
}

#project-wrapper>span:nth-child(3) {
  top: 50%;
  right: -60px;
}

#project-wrapper>span:nth-child(4) {
  bottom: -30px;
  left: calc(50% - 25px);
}

#orbital-menu>ul>li[name="pr"].orb.orbturnred i {
  top: 22px !important;
}

nav#orbital-menu.middleorbturnred:before {
  background-color: #b30122 !important;
  border: 2px solid #b30122 !important;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<div id="project-wrapper">
  <span>Your Strategy</span>
  <span>Review</span>
  <span>Design</span>
  <span>Delivery</span>
  <nav id="orbital-menu">
    <i class="fa fa-map"></i>
    <ul class="orb-master" data-children="4"><span>MENTOR BLUEPRINT</span>
      <li class="orb" name="pa">
        <i class="fa fa-briefcase" aria-hidden="true"><b>Program Acceleration</b></i>
      </li>
      <li class="orb" name="pm">
        <i class="fa fa-briefcase" aria-hidden="true"><b>Portfolio Management</b></i>
      </li>
      <li class="orb" name="ps">
        <i class="fa fa-briefcase" aria-hidden="true"><b>Program Setup</b></i>
      </li>
      <li class="orb" name="pr">
        <i class="fa fa-briefcase" aria-hidden="true"><b>Program Review</b></i>
      </li>
    </ul>
  </nav>
</div>

Добавлены некоторые стили к элементу body во фрагменте, чтобы соответствовать вашему сайту.

Надеюсь, это поможет!

0 голосов
/ 28 августа 2018

Просто нужно изменить фон li.orb кругов на белый, так как на прозрачном фоне, который установлен в данный момент, будут отображаться линии позади него. 

#orbital-menu ul.orb-master li.orb {
  background-color: white;
}

Кроме того, вы можете установить следующие фоны (для текстовых меток) на белый, чтобы вы могли легко читать текст без помех: 

#orbital-menu>ul>li:nth-child(3) i b,
#orbital-menu>ul>li:nth-child(5) i b {
  background-color: white;
}


#project-wrapper {
  width: 100%;
  /* Messing with positioning element on page */
  /* min-height or top margin allows for full use */
  /* min-height:600px;
	 */
  margin: 420px 0 0 0;
  padding: 0;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
}

#orbital-menu {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140px;
  height: 140px;
  margin: -70px 0 0 -70px;
  z-index: 8900 !important;
  list-style-type: none;
  cursor: pointer;
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  -webkit-transition: all 250ms linear;
  -ms-transition: all 250ms linear;
  -moz-transition: all 250ms linear;
  -o-transition: all 250ms linear;
  transition: all 250ms linear;
}

#orbital-menu ul {
  list-style-type: none !important;
  /* -webkit-transition: all 650ms linear;
	 -ms-transition: all 650ms linear;
	 -moz-transition: all 650ms linear;
	 -o-transition: all 650ms linear;
	 transition: all 650ms linear;*/
}

#orbital-menu ul.orb-master {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  position: relative !important;
  clear: both !important;
  height: 140px;
  width: 140px;
  margin: -70px 0 0 -70px;
  z-index: -1 !important;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  /*-webkit-transition: all 650ms ease-out;
	 -ms-transition: all 650ms ease-out;
	 -moz-transition: all 650ms ease-out;
	 -o-transition: all 650ms ease-out;
	 transition: all 650ms ease-out;*/
  /* NAME: ORBITAL-BLOCK-1 */
  /* STATUS: BEGIN */
}

#orbital-menu ul.orb-master li.orb {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /*opacity: 0;*/
  opacity: 1;
  clear: both !important;
  width: 70px;
  height: 70px;
  margin: calc(70px * -0.5) 0 0 calc(70px * -0.5);
  background-color: white;
  border: 2px solid #af6a79;
  z-index: 8900 !important;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  /*-webkit-transition: all 550ms ease-in-out;
	 -ms-transition: all 550ms ease-in-out;
	 -moz-transition: all 550ms ease-in-out;
	 -o-transition: all 550ms ease-in-out;
	 transition: all 550ms ease-in-out;*/
}

#orbital-menu ul.orb-master li.orb+.orb {
  -webkit-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -moz-transform: scale(0.5);
  -o-transform: scale(0.5);
  transform: scale(0.5);
}

#orbital-menu ul.orb-master li {
  border: 10px solid #ff326a;
  z-index: 8950 !important;
  -webkit-animation-delay: 1250ms !important;
  -ms-animation-delay: 1250ms !important;
  -moz-animation-delay: 1250ms !important;
  -o-animation-delay: 1250ms !important;
  animation-delay: 1250ms !important;
}

#orbital-menu ul.orb-master li ul.first-satellite-orb[data-children="4"] li:nth-of-type(1) {
  -webkit-animation-delay: 850ms !important;
  -ms-animation-delay: 850ms !important;
  -moz-animation-delay: 850ms !important;
  -o-animation-delay: 850ms !important;
  animation-delay: 850ms !important;
  -webkit-transform: rotate(90deg) translate(65px) !important;
  -ms-transform: rotate(90deg) translate(65px) !important;
  -moz-transform: rotate(90deg) translate(65px) !important;
  -o-transform: rotate(90deg) translate(65px) !important;
  transform: rotate(90deg) translate(65px) !important;
}

#orbital-menu ul.orb-master li ul.first-satellite-orb[data-children="4"] li:nth-of-type(2) {
  -webkit-animation-delay: 850ms !important;
  -ms-animation-delay: 850ms !important;
  -moz-animation-delay: 850ms !important;
  -o-animation-delay: 850ms !important;
  animation-delay: 850ms !important;
  -webkit-transform: rotate(180deg) translate(65px) !important;
  -ms-transform: rotate(180deg) translate(65px) !important;
  -moz-transform: rotate(180deg) translate(65px) !important;
  -o-transform: rotate(180deg) translate(65px) !important;
  transform: rotate(180deg) translate(65px) !important;
}

#orbital-menu ul.orb-master li ul.first-satellite-orb[data-children="4"] li:nth-of-type(3) {
  -webkit-animation-delay: 850ms !important;
  -ms-animation-delay: 850ms !important;
  -moz-animation-delay: 850ms !important;
  -o-animation-delay: 850ms !important;
  animation-delay: 850ms !important;
  -webkit-transform: rotate(270deg) translate(65px) !important;
  -ms-transform: rotate(270deg) translate(65px) !important;
  -moz-transform: rotate(270deg) translate(65px) !important;
  -o-transform: rotate(270deg) translate(65px) !important;
  transform: rotate(270deg) translate(65px) !important;
}

#orbital-menu ul.orb-master li ul.first-satellite-orb[data-children="4"] li:nth-of-type(4) {
  -webkit-animation-delay: 850ms !important;
  -ms-animation-delay: 850ms !important;
  -moz-animation-delay: 850ms !important;
  -o-animation-delay: 850ms !important;
  animation-delay: 850ms !important;
  -webkit-transform: rotate(360deg) translate(65px) !important;
  -ms-transform: rotate(360deg) translate(65px) !important;
  -moz-transform: rotate(360deg) translate(65px) !important;
  -o-transform: rotate(360deg) translate(65px) !important;
  transform: rotate(360deg) translate(65px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(1) {
  -webkit-transform: rotate(90deg) translate(140px) !important;
  -ms-transform: rotate(90deg) translate(140px) !important;
  -moz-transform: rotate(90deg) translate(140px) !important;
  -o-transform: rotate(90deg) translate(140px) !important;
  transform: rotate(90deg) translate(140px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(1).satellite-orb {
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  -webkit-transform: rotate(90deg) translate(65px) !important;
  -ms-transform: rotate(90deg) translate(65px) !important;
  -moz-transform: rotate(90deg) translate(65px) !important;
  -o-transform: rotate(90deg) translate(65px) !important;
  transform: rotate(90deg) translate(65px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(1).satellite-orb {
  opacity: 1;
  display: block !important;
  -webkit-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -ms-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -moz-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -o-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(2) {
  -webkit-transform: rotate(180deg) translate(140px) !important;
  -ms-transform: rotate(180deg) translate(140px) !important;
  -moz-transform: rotate(180deg) translate(140px) !important;
  -o-transform: rotate(180deg) translate(140px) !important;
  transform: rotate(180deg) translate(140px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(2).satellite-orb {
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  -webkit-transform: rotate(180deg) translate(65px) !important;
  -ms-transform: rotate(180deg) translate(65px) !important;
  -moz-transform: rotate(180deg) translate(65px) !important;
  -o-transform: rotate(180deg) translate(65px) !important;
  transform: rotate(180deg) translate(65px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(2).satellite-orb {
  opacity: 1;
  display: block !important;
  -webkit-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -ms-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -moz-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -o-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(3) {
  -webkit-transform: rotate(270deg) translate(140px) !important;
  -ms-transform: rotate(270deg) translate(140px) !important;
  -moz-transform: rotate(270deg) translate(140px) !important;
  -o-transform: rotate(270deg) translate(140px) !important;
  transform: rotate(270deg) translate(140px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(3).satellite-orb {
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  -webkit-transform: rotate(270deg) translate(65px) !important;
  -ms-transform: rotate(270deg) translate(65px) !important;
  -moz-transform: rotate(270deg) translate(65px) !important;
  -o-transform: rotate(270deg) translate(65px) !important;
  transform: rotate(270deg) translate(65px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(3).satellite-orb {
  opacity: 1;
  display: block !important;
  -webkit-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -ms-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -moz-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -o-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(4) {
  -webkit-transform: rotate(360deg) translate(140px) !important;
  -ms-transform: rotate(360deg) translate(140px) !important;
  -moz-transform: rotate(360deg) translate(140px) !important;
  -o-transform: rotate(360deg) translate(140px) !important;
  transform: rotate(360deg) translate(140px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(4).satellite-orb {
  -webkit-box-shadow: none;
  -ms-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  -webkit-transform: rotate(360deg) translate(65px) !important;
  -ms-transform: rotate(360deg) translate(65px) !important;
  -moz-transform: rotate(360deg) translate(65px) !important;
  -o-transform: rotate(360deg) translate(65px) !important;
  transform: rotate(360deg) translate(65px) !important;
}

#orbital-menu ul.orb-master[data-children="4"] li:nth-of-type(4).satellite-orb {
  opacity: 1;
  display: block !important;
  -webkit-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -ms-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -moz-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  -o-box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
  box-shadow: 0 0 5px #000, inset 0 0 px #FFF;
}

#orbital-menu ul.orb-master[data-children="4"] {
  /*opacity: 0.75;*/
  opacity: 1;
}

#orbital-menu ul.orb-master[data-children="4"] li {
  /*opacity: 0.5;*/
  opacity: 1;
}

#orbital-menu:before,
#orbital-menu:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  clear: both !important;
  cursor: pointer;
  overflow: visible;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  /*-webkit-transition: all 550ms linear;
	 -ms-transition: all 550ms linear;
	 -moz-transition: all 550ms linear;
	 -o-transition: all 550ms linear;
	 transition: all 550ms linear;*/
}

#orbital-menu,
#orbital-menu:focus {
  /* things won't work in IE 10 without this declaration */
}

#orbital-menu:before {
  /*height: 140px;
	 width: 140px;
	 margin: -70px 0 0 -70px;*/
  height: 125px;
  width: 125px;
  margin: -65px 0 0 -63px;
  border: 2px solid #a06270;
  z-index: -1 !important;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  /*background: url('/wp-content/uploads/2018/08/map.png');
	 background-position: center;
    background-repeat: no-repeat;
    background-size: 50%;*/
}

#orbital-menu {
  width: 280px;
  height: 280px;
  margin: -145px 0 0 -143px;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  border: 2px solid #af6a79;
}


/*ul.orb-master span {
    position: absolute;
    top: 130px;
    font-size: 10px;
    font-weight: bold;
    text-align: justify;
    left: 45px;
}*/

ul.orb-master span {
  position: relative;
  bottom: 0;
  top: 137px;
  left: 0;
  right: 0;
  font-weight: bold;
  font-size: 10px;
  margin: 0 auto;
  width: 100px;
  display: block;
  color: #9a9a9a;
  line-height: 12px;
}

nav#orbital-menu ul.orb-master {
  padding: 0;
  text-align: center;
}

#orbital-menu>ul>li:nth-child(2) i {
  transform: rotate(-90deg) !important;
  position: relative;
  right: 0;
  left: 12px;
  bottom: 0;
  top: 8px;
  margin: 0 auto;
  text-align: center;
  font-size: 30px;
  color: #9a9a9a;
}

#orbital-menu>ul>li:nth-child(2) i b {
  text-align: center;
  font-size: 12px;
  display: block;
  top: 24px;
  position: relative;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: capitalize;
}

#orbital-menu>ul>li:nth-child(3) i {
  transform: rotate(-180deg) !important;
  position: relative;
  right: 0;
  left: -2px;
  bottom: 0;
  top: -7px;
  margin: 0 auto;
  text-align: center;
  font-size: 30px;
  color: #9a9a9a;
}

#orbital-menu>ul>li:nth-child(3) i b {
  text-align: center;
  font-size: 12px;
  display: block;
  top: 24px;
  position: relative;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: capitalize;
  background-color: white;
}

#orbital-menu>ul>li:nth-child(4) i {
  transform: rotate(-270deg) !important;
  position: relative;
  right: 0;
  left: -12px;
  bottom: 0;
  top: 8px;
  margin: 0 auto;
  text-align: center;
  font-size: 30px;
  color: #9a9a9a;
}

#orbital-menu>ul>li:nth-child(4) i b {
  text-align: center;
  font-size: 12px;
  display: block;
  top: 25px;
  position: relative;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: capitalize;
}

#orbital-menu>ul>li:nth-child(5) i {
  transform: rotate(0deg) !important;
  position: relative;
  right: 0;
  left: 0;
  bottom: 0;
  top: 22px;
  margin: 0 auto;
  text-align: center;
  font-size: 30px;
  color: #9a9a9a;
}

#orbital-menu>ul>li:nth-child(5) i b {
  text-align: center;
  font-size: 12px;
  display: block;
  top: 25px;
  position: relative;
  font-weight: bold;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-transform: capitalize;
  background-color: white;
}

ul.orb-master li.orb.orbturnred {
  background: #b30122 !important;
  border: 2px solid #b30122 !important;
}

ul.orb-master li.orb.orbturnred i {
  color: #fff !important;
  ;
  top: 20px !important;
}

#orbital-menu>ul>li[name="pm"].orb.orbturnred i {
  top: -7px !important;
  left: -2px;
}

#orbital-menu>ul>li[name="pa"].orb.orbturnred i {
  left: 12px;
  top: 8px !important;
}

#orbital-menu>ul>li[name="ps"].orb.orbturnred i {
  left: -12px;
  top: 8px !important;
}

ul.orb-master {
  list-style-type: none !important;
  list-style: none;
}

nav#orbital-menu>i {
  position: absolute;
  top: 40%;
  left: 40%;
  font-size: 60px;
  clear: both !important;
  cursor: pointer;
  overflow: visible;
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  -moz-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  /* -webkit-transition: all 550ms linear;
    -ms-transition: all 550ms linear;
    -moz-transition: all 550ms linear;
    -o-transition: all 550ms linear;
    transition: all 550ms linear;*/
}

ul.orb-master.orbturnred {
  /* background-color: #b30122 !important;
    border: none !important;*/
}

ul.orb-master.orbturnred span {
  color: #fff !important;
  /*     top: 145px; */
}

i.fa.fa-map.icoturnwhite {
  color: white;
}

ul.orb-master li {
  /*background-image: url(https://mentoreurope.com/wp-content/uploads/2018/08/Cogs_edited-with-gradient.jpg);*/
  background-repeat: repeat;
  background-position: center;
  /*background: #fff !important;*/
}

div#project-wrapper {
  border: 2px dashed gray;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
  height: 470px;
  width: 470px;
}

#project-wrapper>span:nth-child(1) {
  position: absolute;
  left: calc(50% - 42px);
  top: -28px;
  color: #9a9a9a;
  font-style: italic;
  font-weight: 700;
  font-family: initial;
  font-size: 18px;
}

#project-wrapper>span:nth-child(2) {
  position: absolute;
  top: 50%;
  left: -60px;
  color: #9a9a9a;
  font-style: italic;
  font-weight: 700;
  font-family: initial;
  font-size: 18px;
}

#project-wrapper>span:nth-child(3) {
  position: absolute;
  top: 50%;
  right: -60px;
  color: #9a9a9a;
  font-style: italic;
  font-weight: 700;
  font-family: initial;
  font-size: 18px;
}

#project-wrapper>span:nth-child(4) {
  position: absolute;
  bottom: -30px;
  left: calc(50% - 25px);
  color: #9a9a9a;
  font-style: italic;
  font-weight: 700;
  font-family: initial;
  font-size: 18px;
}

#orbital-menu>ul>li[name="pr"].orb.orbturnred i {
  top: 22px !important;
}

nav#orbital-menu.middleorbturnred:before {
  background-color: #b30122 !important;
  border: 2px solid #b30122 !important;
}

#orbital-menu:before {
  transition: all 250ms linear;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css?ver=4.9.8" rel="stylesheet" />
<div id="project-wrapper"><span>Your Strategy</span><span>Review</span><span>Design</span><span>Delivery</span>
  <nav id="orbital-menu" class=""><i class="fa fa-map"></i>
    <ul class="orb-master" data-children="4"><span>MENTOR BLUEPRINT</span>
      <li class="orb" name="pa"> <i class="fa fa-briefcase" aria-hidden="true"><b>Program Acceleration</b></i> </li>
      <li class="orb" name="pm"> <i class="fa fa-briefcase" aria-hidden="true"><b>Portfolio Management</b></i> </li>
      <li class="orb" name="ps"> <i class="fa fa-briefcase" aria-hidden="true"><b>Program Setup</b></i> </li>
      <li class="orb" name="pr"> <i class="fa fa-briefcase" aria-hidden="true"><b>Program Review</b></i> </li>
    </ul>
  </nav>
</div>

Редактировать: Это решение будет работать, только если фон будет белым, что делает проблему тривиальной. Я предоставил другой ответ, чтобы получить новую информацию о том, что фон является изображением.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...