小程序笔记(十)之css实现扇形

最新推荐文章于 2023-08-11 18:16:00 发布

我是黄同学

最新推荐文章于 2023-08-11 18:16:00 发布

阅读量660

点赞数

分类专栏：小程序文章标签： css 小程序前端

本文链接：https://blog.csdn.net/Joker__123/article/details/125212872

版权

小程序专栏收录该内容

11 篇文章 1 订阅

订阅专栏

一.前言
楼主在最近的小程序开发中，遇到要用扇形的需求，一开始想用贴图，但是体积太大，让我放弃了这个念头，于是就此做一次记录分享

二.实现
css代码

.view {
  width: 0rpx;
  height: 0rpx;
  border-width: 100px;
  border-style: solid;
  border-color: transparent transparent rgb(75, 214, 11) transparent;
  border-radius: 100%;
}

wxml

<view class="view"></view>

在这里插入图片描述

三.其他扩展
1.楼主在调试过程，发现通过改变宽和高可以变化类似弯曲梯形的效果，可以用来实现遥控器效果

.view {
  width: 300rpx;
  height: 300rpx;
  border-width: 100px;
  border-style: solid;
  border-color: transparent transparent rgb(75, 214, 11) transparent;
  border-radius: 100%;
}