1、在学习vue电子书时,想把里边的书签,换成自己想要的形状,第一反应就是叶子。
然后绞尽脑汁想,还是想不出如何用CSS画出。突然在大佬的树叶样本源码中,发现了border-radius的强大。它不光可以设置弧度,还可以设置水平和垂直的弧度,共8个值。意味着可以画出任意曲线。
大佬代码解析图(水滴状图形)
经剖析,核心代码如下,8个值。
8个值分别表示,左上,右上,右下,左下,水平 以及 垂直,的弧度
经尝试。运用8个值可以画出叶子形状。
很好看,很神奇吧。开始绘制叶茎
1小时后,完成了,可以用了。