使用不规则形状的 CSS 圆形菜单

Question

您知道如何实现（仅使用 CSS、画布等）这种具有不规则形状的圆形菜单吗？ PS。 IE 和旧浏览器 - 我不在乎

Answer 1

我认为实现这一点的最佳方法是使用 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>

Lucas Bebber 用 SVG 过滤器完成了这个惊人的 Codepen serie，并通过 CSS 应用。

Answer 2

以下示例中的“圆圈”与您的图像完全的形状不同。这是可能的，但至少以下内容可以帮助您入门。

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>