当前位置: 首页 > Web前端 > HTML5

CSS实现电池、水彩笔、铅笔、蜡笔造型

时间:2023-04-05 17:18:21 HTML5

本次画出的形状难点主要有等腰梯形、等腰三角形、圆角等腰三角形1.电池效果:难点:100%电量时突出的白色部分怎么变成红色?(也就是电池正极突出的部分怎么填充颜色?)解决方法:当电池100%时,让显示电量的红色div溢出整个电池,用白色div遮住电池两侧突出部分。如图:Uncovered:   Covered:代码实现:

0%
40%100%2.水彩笔效果:难度:等腰梯形绘图解:使用clip-path绘制等腰梯形代码实现:
3.铅笔效果:难点:画一个等腰三角形解决方法:使用clip-path画一个等腰三角形代码实现:
4.蜡笔效果:难度:画一个圆角的等腰三角形解决方法:用rotate+skewX画出直角和三角形相交不能重合的瑕疵,如图(有更好的方法请提供以下代码):代码实现: