search

QiShaoXuan / css_tricks

Some CSS tricks - 一些 CSS 常用样式
https://qishaoxuan.github.io/css_tricks/
4.01k stars 410 forks source link

扇形 | CSS Tricks #49

Open QiShaoXuan opened 5 years ago

QiShaoXuan commented 5 years ago

https://qishaoxuan.github.io/css_tricks/sector/

some CSS tricks, 一些常用的 CSS 样式, 一点 CSS 技巧

yukinotech commented 4 years ago

三角模拟为什么要用2个span去做？一个span也是可以的，因为都是截取三角形的部分形成扇形，而三角形的高正好是半径。2个span会使得2个扇形的中间好像有一条线

QiShaoXuan commented 4 years ago

@yukinotech 三角模拟为什么要用2个span去做？一个span也是可以的，因为都是截取三角形的部分形成扇形，而三角形的高正好是半径。2个span会使得2个扇形的中间好像有一条线

你可以试下一个三角形就知道了，中间有条线可以在宽度上都 +1 做处理，我这里为了直观没有做处理

yukinotech commented 4 years ago

@yukinotech 三角模拟为什么要用2个span去做？一个span也是可以的，因为都是截取三角形的部分形成扇形，而三角形的高正好是半径。2个span会使得2个扇形的中间好像有一条线

你可以试下一个三角形就知道了，中间有条线可以在宽度上都 +1 做处理，我这里为了直观没有做处理

想了一下，我好像没有考虑到角度大于180度的扇形问题。主要是这个原因吗？