Как добиться эффекта сложенного гармошкой листа с помощью CSS?

1,00

р.

Подскажите как такое сверстать. Интересует именно блоки в виде трапеций с обводкой. Фон, стрелки, текст - то все понятно.

Ответ

.trapezoid-in { border: 2px solid #000 width: 400px height: 100px background: #ccc transform: perspective(15px) rotateX(-1deg) margin: 6px 50px 0 } .trapezoid-out { border: 2px solid #555 width: 400px height: 100px background: #555 transform: perspective(15px) rotateX(1deg) margin: -6px 50px 0 }