Несколько иначе сделал:
1. Слой заливается под углом с помощью border (поддержка IE8)
2. По hover родительского блока меняем толщину border до вдвоебольшей чем размер родительского блока
3. Анимация возможна с помощью transition или animate, но ни то, ни другое не поддерживается в IE8
Пример: codepen.io/anon/pen/DpCfk

Выяснилось что в секции grammars находится либо тело либо ссылка на XSD Schema File. Для формирования XML из XSD (содержимого секции grammars) использовал сервис xmlgrid.net/genXml.html

UPD 26.01.2017 Ответ для classinfo

Я сформировал xml документ:

<?xml version="1.0" encoding="utf-8"?>
<tns:ListCallRecordRequest xmlns:tns="http://client.pub.api.cloudpbx.beeline.ru">
<pageNumber>0</pageNumber> 
<pageSize>200</pageSize>
<direction>INB</direction>
<dateFrom>2004-02-12T15:19:21+00:00</dateFrom>
<dateTo>2004-02-12T15:19:21+00:00</dateTo>
<sort>
<direction>ASC</direction>
<field>Date</field>
</sort>
</tns:ListCallRecordRequest>

где:

pageNumber - порядковый номер выборки
pageSize - количество элементов выборки
direction - направление (INB - входящие)
dateFrom, dateTo - диапазон выборки, даты в формате ISO 8601
sort - сортировка
sort - field - по какому полю сортировать
sort - direction - направление сортировки (ASC - по возрастанию)

и отправил запрос методом "PUT", с заголовком "Content-type: application/xml" его по адресу "/api/pub/client/call/record/list"