css实现电池、水彩笔、铅笔、蜡笔形状

本次绘制的形状中难点主要有 等腰梯形、 等腰三角形、 圆角等腰三角形

1、电池

效果：

难点： 电池电量100%时凸出来的那部分白色怎么变成红色？（即电池正极凸出来的那部分怎么填充颜色？）
解决： 电量100%时让显示电量的红色div溢出整个电池，并在电池凸出来部分的两边分别使用一个白色div盖住即可。如图：

未盖住：　　　

盖住了：

代码实现：

    

        

            

                
0%
                

            
        
    
    

        

            

                
40%
                

            
        
    
    

        

            

                
100%
                

            
        
    

2、水彩笔

效果：

难点： 等腰梯形的绘制
解决： 使用clip-path绘制等腰梯形
代码实现：

3、铅笔

效果：

难点： 等腰三角形的绘制
解决： 使用clip-path绘制等腰三角形
代码实现：

4、蜡笔

效果：

难点： 圆角等腰三角形的绘制
解决： 使用rotate+skewX绘制
瑕疵 直角与三角相接的地方不能重合，如图(有更好办法的大佬麻烦提供下代码)：

代码实现：