Цветной снимок внизу изображение отображается

Question

Я пытаюсь заполнить изображения негеометрических фигур слева направо в соответствии с процентом. Например, если бы я хотел, чтобы 30% заполняемых фигур были заполнены, то только этот процент фигур будет заполняться слева направо.

Я могу получить фигуры, заполненные, но есть полоска цвета, которая также появляется под заполненными фигурами. Как я могу предотвратить появление этого?

<div class="pic" > 
     <img class = "image" height= "100%" width = "100%" 
      src="http://i60.tinypic.com/warmo6.png"/> 
    </div> 


    .pic { 
     background: linear-gradient(to right, red 40%, white 60%); 
    } 

Answer 1

Добавьте это к вам CSS:

.pic img { vertical-align: top; } 

Example here