dom1n1k

Клик-джекинг это называется. НО. Я бы отбивал за это руки по самую шею.

Практика, в принципе, нормальная, но каких-то особых плюсов не несет.
Это просто вопрос вкуса, привычки и предпочтений по рабочему процессу.
Кому-то удобнее отталкиваться от базового кегля 10px. Кто-то привык к обычным значениям.
Не принципиально, дело вкуса и договоренностей с коллегами.

Подозреваю, что срабатывает защита безопасности. Если в канвас загружена картинка с локального диска, браузер не даст её экспортировать в дата-урл. Потому что считает, что картинка может содержать приватные данные. Нужно проксировать через сервер.
А вообще, надо смотреть в консоль - там скорее всего есть какие-то ошибки или сообщения.

Да, просто картинкой лучше (если сторонних передовых технологий - svg). Проще и практичнее.

А гении, которые к месту и не к месту (второе - чаще) суют трансформации, вряд ли ответят на пару простых вопросов:
1. Как сделать так, чтобы сам блочок наклонился, но стрелка в нём осталась ровной? (Скорее всего, дальше последуют идеи с помещением стрелки в before/after, но кому оно надо?)
2. Как потом в этом искаженном блоке высчитывать координаты, если будет нужно иконку отцентрировать точно до пикселя? (Хотя "как" оно-то понятно, непонятно "нафига")
3. Что делать, если завтра этой кнопке захочется дать, например, окантовку?
4. Как избавиться от неаккуратного антиалиасинга по диагональной стороне блока в некоторых браузерах? (Трансформации применяются уже к растровому изображению и потому дают не очень качественную картинку).

100 колонок и 10 строк?
Таблицу нужно просто транспонировать.