html中怎么做扇形菜单,2分钟教你实现环形/扇形菜单(基础版)

前言

项目需要用到环形菜单，初略在网上找了一下，没有找到合适的，于是自己写了一个很简单的，后续再优化。

这个组件是基于react,但是原理都一样。

展开效果如下：

实现

css(less)

@centerIconSize: 30px;

.flex(@justify: flex-start, @align: center) {

justify-content: @justify;

align-items: @align;

display: flex;

}

.sector-menu-wrapper {

position: relative;

width: @centerIconSize;

margin: auto;

.center-icon {

.flex(center);

width: @centerIconSize;

height: @centerIconSize;

border-radius: 50%;

background: rgba(0, 0, 0, 0.3);

color: white;

cursor: pointer;

}

.sector-item {