Как сверстать фигуры на background' элемента?

Question

[hamster141095]

Как сверстать квадраты, не используя обычные div'ы?

Имею ввиду в свойстве дива .content прописать

background: linear-gradient(60deg, red 60%, red 60%) 50% 50% / 8em 8em,
    linear-gradient(red, red) 80% 80% / 8em 8em;

Это создаст 2 квадрата, но как их скруглить?
,

Comments

[hamster141095]

Их можно будет спозиционировать, но как скруглить и повернуть не понимаю

[Ankhena]

Божечки, зачем это делать градиентами?
Ведь в макете они, наверняка, SVG.

[hamster141095]

Ankhena, Ну дак и спрашиваю. Может есть способ через clip-path или gradient рисовать такие фигуры
Понятно, что это проще будет

[Ankhena]

hamster141095, нет смысла.
4 фигуры - 4 path.
Всё.
Инлайните в bg.

Answer 1

[Steppp]

Повесь на псевдоэлементы.
Ну если дивы нельзя, то спаны используй, также 1 спан 1 квадрат и псевдо эл другой квадрат.
linear-gradient не закруглишь углы, или костыляй)

Я такое вырезаю в svg , и вставляю через

background: url("data:image/svg+xml, --- --- --- ") center no-repeat;

Так же можно и несколько

background: url("data:image/svg+xml, --- --- --- ") center no-repeat,
                     url("data:image/svg+xml, --- --- --- ") center no-repeat,
                     url("data:image/svg+xml, --- --- --- ") center no-repeat;

Comments

[hamster141095]

Nice, спасибо)

[Steppp]

hamster141095,

url-encoder В Insert SVG: вставляешь svg код, в Ready for CSS: он тебе кодирует в background - готовый CSS код дает