Конечно, можно просто запилить svg и вес небольшой и цвет менять можно, но это же скучно! Содержание: 1. Вариант с svg. Можно менять цвет, поворачивать <svg viewPort="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line x1="1" y1="11" x2="11" y2="1" stroke="black" stroke-width="2"/> <line x1="1" y1="1" x2="11" y2="11" stroke="#000000" stroke-width="2"/> </svg> 2. С помощью псевдоклассов. По мне, самый устаревший способ. <div class="close"></div> <style> .close:before, .close:after { content: ""; position: absolute; width: 24px; height: 4px; background: #000000; } ...

CSS-переходы позволяют плавно изменять CSS-свойства элементов, т.е. делать это не мгновенно (за 15-16 миллисекунд), а в течении необходимого Вам времени. Для работы с переходами всего существует 4 отдельных CSS-свойства и еще одно групповое. Начнем со свойства transition-duration, которое задает промежуток времени в секундах или миллисекундах, в течение которого должна произойти смена CSS-свойства с одного значения на другое. Например:  transition-duration: 2s; Следующее свойство - transition-property. В нем указывается название CSS-свойств, к которым будет применен эффект плавного перехода. Причем может быть указано как одно свойство, так и несколько через запятую...