注：本demo在小程序环境中测试，其他h5，pc网页通用，只需将小程序单位和标签名改成通用的即可，并按照自己的需求做适配即可。

大体思路：四个相同的正方形田字形布局，配合旋转属性即可。

html结构

<view class="button-group">
  <view class="outter-circle">
    <view class="inner-parts brown" bindtap="button" data-type="volAdd">
      <text class="rotate">+</text>
    </view>
    <view class="inner-parts silver" bindtap="button" data-type="chaAdd">
      <text class="rotate">+</text>
    </view>
    <view class="inner-parts blue" bindtap="button" data-type="chaDes">
      <text class="rotate">-</text>
    </view>
    <view class="inner-parts gold" bindtap="button" data-type="volDes">
      <text class="rotate">-</text>
    </view>

    <view class="inner-circle" bindtap="button" data-type="ok">
      <text class="ok rotate">ok</text>
    </view>
  </view>
</view>

css样式

.button-group {
  padding-top: 20rpx;
  width: 300rpx;
  height: 300rpx;
  background-color: pink;
}
.outter-circle {
  position: relative;
  margin-left: 10rpx;
  width: 280rpx;
  height: 280rpx;
  background-color: lightcyan;
  border-radius: 100%;
  overflow: hidden;
  transform-origin: center;
  transform: rotate(45deg);
}
.inner-parts {
  float: left;
  width: 140rpx;
  height: 140rpx;
  line-height: 140rpx;
  text-align: center;
}
.silver {
  background-color: silver;
}
.gold {
  background-color: gold;
}
.blue {
  background-color: blue;
}
.brown {
  background-color: brown;
}
.inner-circle {
  position: absolute;
  margin-top: 70rpx;
  margin-left: 70rpx;
  width: 140rpx;
  height: 140rpx;
  line-height: 140rpx;
  text-align: center;
  border-radius: 100%;
  background-color: lightblue;
}
.rotate {
  display: inline-block;
  transform: rotate(-45deg);
}

注：文字区域若不inline-block，旋转属性将不生效！

按钮点击事件

button: function(e) {
    var buttonType = e.currentTarget.dataset.type
    console.log(buttonType)
    switch (buttonType) {
      case 'chaAdd':
        console.log('backward the channel')
      break
      case 'chaDes':
        console.log('forward the channel')
      break
      case 'volAdd':
        console.log('strengthen the volumn')
      break
      case 'volDes':
        console.log('weaken the volumn')
      break
      default:
        console.log('ok')
    }
  }

运行效果
 

总结

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS盒子模型属性有哪些，用法是怎样

  本篇文章给大家带来了css中关于盒子模型的诸多属性详细解析，其中包括边框、边距、圆角等等，希望对大家有帮助。

• 移动端CSS列表滑动时怎样防止低端被遮住

  这篇文章主要介绍了css列表滑动防止被底部遮住和适配屏幕长一点的机型处理 ,需要的朋友可以参考下

• 用纯css实现缩略图悬停显示信息的代码是什么

  我们平时在实现悬停效果的时候基本会用到Javascript，而下面这篇文章主要给大家介绍了利用纯css实现缩略图悬停效果的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用css具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。

• CSS3如何实现中心点布局的效果，方法是什么

  这篇文章主要介绍了css3实现元素环绕中心点布局的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• CSS中让实现文本右对齐效果的方法是什么

  在css中，可以使用“文本元素{text-align:right;}”样式来定义文本右对齐；“text-align”属性用于规定元素中的文本的水平对齐方式，当属性的值为“right”时，文本排列会向右对齐。