使用不規則形狀的CSS圓形菜單

Question

你有沒有關於如何實現（只使用CSS，畫布等）的這種圓形菜單有不規則形狀的想法？ PS。 IE和舊瀏覽器 - 我不在乎

Answer 1

「圈子」，在下面的例子中沒有完全相同相同的形狀，你的形象。這是可能的，但至少下面的內容會讓你開始。

UL.circle-menu { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
UL.circle-menu LI { 
 
    display: block; 
 
    float: left; 
 
    width: 115px; 
 
    text-align: center; 
 
    background-color: #3f48cc; 
 
} 
 

 
UL.circle-menu LI .circle { 
 
    display: block; 
 
    width: 80px; 
 
    height: 80px; 
 
    background-color: white; 
 
    border-radius: 50%; 
 
    margin: 0 auto; 
 
    position: relative; 
 
    top: 2px; 
 
    padding-top: 22px; 
 
    box-sizing: border-box; 
 
} 
 

 
UL.circle-menu LI .connector { 
 
    display: block; 
 
    width: 30px; 
 
    height: 15px; 
 
    background-color: white; 
 
    margin: 0 auto; 
 
    position: relative; 
 
} 
 

 
UL.circle-menu LI .connector::before, 
 
UL.circle-menu LI .connector::after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    width: 15px; 
 
    height: 15px; 
 
    background-color: #3f48cc; 
 
    border-radius: 50%; 
 
} 
 

 
UL.circle-menu LI .connector::before { 
 
    left: -7px; 
 
} 
 

 
UL.circle-menu LI .connector::after { 
 
    left: 22px; 
 
} 
 

 

 
UL.circle-menu LI .menu-text { 
 
    display: inline-block; 
 
    width: 115px; 
 
    background-color: white; 
 
    padding: 10px; 
 
    font-family: sans-serif; 
 
    font-size: 16px; 
 
    color: #c3c3c3; 
 
    box-sizing: border-box; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/> 
 

 
<ul class="circle-menu"> 
 

 
    <li> 
 
    <div class="circle"> 
 
     <i class="fa fa-home fa-2x" aria-hidden="true"></i> 
 
    </div> 
 
    <div class="connector"></div> 
 
    <div class="menu-text">Home</div> 
 
    </li> 
 

 
    <li> 
 
    <div class="circle"> 
 
     <i class="fa fa-home fa-2x" aria-hidden="true"></i> 
 
    </div> 
 
    <div class="connector"></div> 
 
    <div class="menu-text">Home</div> 
 
    </li> 
 

 
    <li> 
 
    <div class="circle"> 
 
     <i class="fa fa-home fa-2x" aria-hidden="true"></i> 
 
    </div> 
 
    <div class="connector"></div> 
 
    <div class="menu-text">Home</div> 
 
    </li> 
 

 
</ul>

Answer 2

我認爲實現這一目標的最好方法是使用SVG濾鏡。你正在談論一個已經存在的效果，它被稱爲Goo。

.menu{ 
 
    filter:url('#shadowed-goo'); 
 
    position:absolute; 
 
    left:0; 
 
    padding-top:20px; 
 
    padding-left:50px; 
 
    width:100px; 
 
    height:100px; 
 
    box-sizing:border-box; 
 
    font-size:20px; 
 
    text-align:left; 
 
} 
 
.menu-item{ 
 
    border-radius:100%; 
 
    width:80px; 
 
    height:80px; 
 
    position:absolute; 
 
    top:20px; 
 
    text-align:center; 
 
    line-height:80px; 
 
    background:#f62; 
 
    left:10px; 
 
} 
 
.home{ 
 
    width:100px; 
 
    position:absolute; 
 
    text-align:center; 
 
    top:113px; 
 
    left:0; 
 
    background:#f62; 
 
    height:100px; 
 
}

<nav class="menu"> 
 
    <a href="#" class="menu-item"></a> 
 
    <div class="home">home</div> 
 
</nav> 
 

 

 
<!-- filters --> 
 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
 
    <defs> 
 
     <filter id="shadowed-goo"> 
 
      
 
      <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" /> 
 
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /> 
 
      <feGaussianBlur in="goo" stdDeviation="3" result="shadow" /> 
 
      <feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2" result="shadow" /> 
 
      <feOffset in="shadow" dx="1" dy="1" result="shadow" /> 
 
      <feBlend in2="shadow" in="goo" result="goo" /> 
 
      <feBlend in2="goo" in="SourceGraphic" result="mix" /> 
 
     </filter> 
 
     <filter id="goo"> 
 
      <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" /> 
 
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -7" result="goo" /> 
 
      <feBlend in2="goo" in="SourceGraphic" result="mix" /> 
 
     </filter> 
 
    </defs> 
 
</svg>

盧卡斯Bebber有這個驚人的Codepen serie與SVG過濾完成，並通過CSS應用。