чистая лента css, простой способ?

Question

Я хотел бы, чтобы достичь этой ленты с помощью CSS3:

Есть ли способ, чтобы создать «искаженные» прямоугольники в CSS 3, или я должен пойти на треугольники? Я довольно новичок в CSS3. Каким будет самый простой способ достичь этой ленты?

Answer 1

У меня было немного удачи с этим инструментом: http://cssarrowplease.com/

В вашем случае, вы будете иметь как :before, и :after с различными конфигурациями стрелок.

Наконец, обратите внимание, что для получения указательной стрелки вы используете границу с одной стороны от 4. Но чтобы получить диагональную линию, вы просто используете границу на 2 смежных сторонах и без границ на других сторонах.

Удачи вам!