小程序
小游戏
企业微信
微信支付
扫描小程序码分享
这个按钮怎么做
35 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
你一个正方形DIV ,分成4份,旋转一下,中间定位一个圆,就可以了嘛@@
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
值用css的话,那就搞四个扇形,然后正中间再定位一个圆形div,
楼主解决了吗?解决了可以分享一下吗?
前端面试题没见过叫你css写一个三角形吗,同样原来,然后两个边框圆角,倾斜。。。我猜是这样的
用 1 个圆形,4个半圆形 position: relative/absolute z-index:1,2,3,4,5 就可以了。
写view 用图片拼。楼上明月有说。
wechatide://minicode/WLLw1KmX6cYl 开发者工具中自己导入
完全,没问题
确实,知道思路的话还是挺简单的,我的是一个盒子里面有5个小盒子,里面四个小盒子旋转45度,然后4个角对角定位在一起,然后大盒子用溢出处理,把边线变成圆形,最后再把第5个小盒子变成圆形,定位在中间,然后就OK了,如果想完成什么功能,我这种的话就直接给里面的小盒子加上事件就好了,前面大神的那些,可以用按钮或者用盒子,定位到指定的位置,然后调透明,加事件,完成
我是个前端的新手,以上是我的思路,不喜轻喷,(*^__^*) 嘻嘻……
这种挺简单的,简单做了下,说下思路,
外层大圆设置相对定位 ,中间小圆设置绝对定位居中,然后2个直线,各旋转45deg -45deg.中间圆背景白色,层级z-index:1,把中间线条挡住就可以。
<div style=" width: 200px;height: 201px; border: 1px solid orange; border-radius: 400px;position: relative;">
<div style="width: 1px;height: 200px; background: orange;overflow: hidden; position: absolute; top: 0;left: 50%; transform: translateX(-50%) rotate(-45deg);"></div>
<div style="width: 1px; height: 200px; background: orange;overflow: hidden;position: absolute;top: 0; left: 50%;transform: translateX(-50%) rotate(45deg);"></div>
<div style=" position: absolute;width: 100px;height: 100px;border: 1px solid orange; left: 50%; top: 50%;transform: translate(-50% , -50%); border-radius: 100px;background: white;"></div>
</div>
正在加载...
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
你一个正方形DIV ,分成4份,旋转一下,中间定位一个圆,就可以了嘛@@
值用css的话,那就搞四个扇形,然后正中间再定位一个圆形div,
楼主解决了吗?解决了可以分享一下吗?
前端面试题没见过叫你css写一个三角形吗,同样原来,然后两个边框圆角,倾斜。。。我猜是这样的
用 1 个圆形,4个半圆形 position: relative/absolute z-index:1,2,3,4,5 就可以了。
写view 用图片拼。楼上明月有说。
wechatide://minicode/WLLw1KmX6cYl 开发者工具中自己导入
完全,没问题
确实,知道思路的话还是挺简单的,我的是一个盒子里面有5个小盒子,里面四个小盒子旋转45度,然后4个角对角定位在一起,然后大盒子用溢出处理,把边线变成圆形,最后再把第5个小盒子变成圆形,定位在中间,然后就OK了,如果想完成什么功能,我这种的话就直接给里面的小盒子加上事件就好了,前面大神的那些,可以用按钮或者用盒子,定位到指定的位置,然后调透明,加事件,完成
我是个前端的新手,以上是我的思路,不喜轻喷,(*^__^*) 嘻嘻……
这种挺简单的,简单做了下,说下思路,
外层大圆设置相对定位 ,中间小圆设置绝对定位居中,然后2个直线,各旋转45deg -45deg.中间圆背景白色,层级z-index:1,把中间线条挡住就可以。
<div style=" width: 200px;height: 201px; border: 1px solid orange; border-radius: 400px;position: relative;">
<div style="width: 1px;height: 200px; background: orange;overflow: hidden; position: absolute; top: 0;left: 50%; transform: translateX(-50%) rotate(-45deg);"></div>
<div style="width: 1px; height: 200px; background: orange;overflow: hidden;position: absolute;top: 0; left: 50%;transform: translateX(-50%) rotate(45deg);"></div>
<div style=" position: absolute;width: 100px;height: 100px;border: 1px solid orange; left: 50%; top: 50%;transform: translate(-50% , -50%); border-radius: 100px;background: white;"></div>
</div>