收藏
回答

前端的一个按钮,有大神会吗

这个按钮怎么做

回答关注问题邀请回答
收藏

35 个回答

  • 再见小时候
    再见小时候
    2018-04-18

    你一个正方形DIV ,分成4份,旋转一下,中间定位一个圆,就可以了嘛@@

    2018-04-18
    有用
    回复
  • JasonCooper
    JasonCooper
    2018-04-18

    值用css的话,那就搞四个扇形,然后正中间再定位一个圆形div,

    2018-04-18
    有用
    回复
  • 平行时空
    平行时空
    2018-04-18

    楼主解决了吗?解决了可以分享一下吗?

    2018-04-18
    有用
    回复
  • YF.L
    YF.L
    2018-04-18

    前端面试题没见过叫你css写一个三角形吗,同样原来,然后两个边框圆角,倾斜。。。我猜是这样的

    2018-04-18
    有用
    回复
  • J. T
    J. T
    2018-04-17

    用 1 个圆形,4个半圆形 position: relative/absolute  z-index:1,2,3,4,5 就可以了。

    2018-04-17
    有用
    回复
  • 有一天,我捡了神灯许了愿神灯亮了
    有一天,我捡了神灯许了愿神灯亮了
    2018-04-17

    写view  用图片拼。楼上明月有说。

    2018-04-17
    有用
    回复
  • | ⃢👁_👁⃢ |
    | ⃢👁_👁⃢ |
    2018-04-17

    wechatide://minicode/WLLw1KmX6cYl 开发者工具中自己导入

    2018-04-17
    有用
    回复
  • Qn
    Qn
    2018-04-17

    完全,没问题

    2018-04-17
    有用
    回复
  • 塔
    2018-04-17

    确实,知道思路的话还是挺简单的,我的是一个盒子里面有5个小盒子,里面四个小盒子旋转45度,然后4个角对角定位在一起,然后大盒子用溢出处理,把边线变成圆形,最后再把第5个小盒子变成圆形,定位在中间,然后就OK了,如果想完成什么功能,我这种的话就直接给里面的小盒子加上事件就好了,前面大神的那些,可以用按钮或者用盒子,定位到指定的位置,然后调透明,加事件,完成




    我是个前端的新手,以上是我的思路,不喜轻喷,(*^__^*) 嘻嘻……

    2018-04-17
    有用
    回复
  • 小笨🐲
    小笨🐲
    2018-04-17

    这种挺简单的,简单做了下,说下思路,

    外层大圆设置相对定位 ,中间小圆设置绝对定位居中,然后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>


    2018-04-17
    有用
    回复

正在加载...

登录 后发表内容