前端的一个按钮，有大神会吗
发布于 4 年前 作者 xia75 15721 次浏览 来自 问答

这个按钮怎么做

10 回复

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

完全，没问题

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

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

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

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

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

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

确实，知道思路的话还是挺简单的，我的是一个盒子里面有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>

回到顶部