Как делать различные фигуры в css?

Question

[TreeFall]

Вот к примеру надо сделать такие штуки в кнопке:


Ну или пусть стрелочка:


Как их можно сделать? Я понимаю, что можно просто вставлять svg каждый раз, но как по мне это странно, если можно просто сделать фигуру.

Comments

[Ankhena]

Я понимаю что можно просто вставлять svg каждый раз

В смысле каждый раз?
Есть спрайты (лучше стеки).
Есть кастомные свойства и инлайн svg в css.

Просто фигуры можете рисовать градиентами, тенями, псевдоэлементами.

Только для ваших примеров один вопрос: зачем??

[TreeFall]

Ankhena, Каждый раз значит что вместо куска кода просто вставлять с сервера svg.

Только для ваших примеров один вопрос: зачем??

Ну а как мне ещё сделать такую кнопку как на первом примере?

[Ankhena]

TreeFall,

Каждый раз значит что вместо куска кода просто вставлять с сервера svg.

Что за ерунда?
Скачался один раз стек и лежит себе в кеше.
https://github.com/firefoxic/gulp-stacksvg

Инлайном в кастомки - аналогично, только в кеше лежит весь css.
https://yoksel.github.io/url-encoder/ru/

Что значит "вставлять svg вместо куска кода" совсем не понятно, потому что svg это код.

[FeST1VaL]

Как по мне фигней занимаетесь) больше времени потратите на "верстку иконки" такого плана чем вставите SVG...

Answer 1

[Семен Чернышев]

Здесь есть некоторые образцы https://habr.com/ru/post/126207/