CSS-与直线相交的停线

时间：2018-08-28 17:26:12

标签： html css css3

有人可以告诉我如何阻止这条线越过圆吗？ 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 :(得分：2)

这是一个艰难的曲奇，但我喜欢挑战！我必须通过将大圆圈边框移到#orbital-menu:after伪元素并调整边距来更改一些现有的CSS。

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属性。应用边框后，它将重塑元素的形状。我利用clip-path maker生成了多边形，以裁剪出与其他圆相交的边界。不能将其应用于元素本身，否则子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元素中添加了一些样式以匹配您的网站。

希望这会有所帮助！

答案 1 :(得分：1)

只需将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>

编辑：该解决方案仅在背景为白色的情况下有效，这使问题变得微不足道。我提供了另一个答案，倾向于使用背景为图像的新信息。

相关问题
最新问题