Думал сделать такой беграунд

Думал сделать такой беграунд

через бордери , но тяжело текст вместить с ним если сделать через бордер, какие еще варианты есть?

#css #frontend #html #programming #russian

06.12.2021

26 ответов

23 просмотра

svg?

06.12.2021

Maks Автор вопроса

Iura Mihalachi
svg?

Никогда не работал почты с svg так что незнаю как

06.12.2021

Volodya

Clip-path

06.12.2021

Alibek Кulseitov 🇰🇿

через ;before border

06.12.2021

Alibek Кulseitov 🇰🇿

https://codepen.io/o/pen/wosfH

06.12.2021

Maks
Никогда не работал почты с svg так что незнаю как

background: url('/svg.svg'); background-size: 100%; background-repeat: no-repeat; Cама картинка <svg width="800" height="600" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient spreadMethod="pad" y2="0" x2="1" y1="0" x1="0" id="svg_3"> <stop offset="0" stop-opacity="0.99609" stop-color="#872216"/> <stop offset="1" stop-opacity="0.99609" stop-color="#b22727"/> </linearGradient> </defs> <g> <title>Layer 1</title> <path id="svg_2" d="m237.99024,72.17526c5,0 516.01036,-0.195 516.00957,-0.195c0.00079,0 0,456.08861 0,456c0,0.08881 -707.00645,0 -708,0c0.99364,0 186.99043,-455.805 191.99043,-455.805z" opacity="NaN" stroke="#000" fill="url(#svg_3)"/> </g> </svg>

06.12.2021

background: url('/svg.svg'); background-size: ...

А вот тут можешь нарисовать всё это https://editor.method.ac/

06.12.2021

Maks Автор вопроса

Iura Mihalachi
А вот тут можешь нарисовать всё это https://editor...

А текст тогда как в svg например мне потом добавлять?)

06.12.2021

Iura Mihalachi
это то что я сделал

это то что я сделал

06.12.2021

Maks Автор вопроса

А как правильнее будет тут ? через svg?

06.12.2021

А как правильнее будет тут ? через svg?

скинь градиент пожалуйста

06.12.2021

Alibek Кulseitov 🇰🇿

А как правильнее будет тут ? через svg?

transform :skew

06.12.2021

Maks Автор вопроса

Iura Mihalachi
скинь градиент пожалуйста

width: 893px; height: 424px; /* Bordeaux */ background: linear-gradient(270deg, #780A2B -33.96%, #100005 223.43%); box-shadow: -7.44186px 0px 22.3256px rgba(0, 0, 0, 0.35);

06.12.2021

А как правильнее будет тут ? через svg?

как вариант над картинкой наложить блок с контентом. Блоку с контентом сделать фон градиентом.

06.12.2021

Никита Чеботов
как вариант над картинкой наложить блок с контенто...

левая часть прозрачным цветом

06.12.2021

Maks Автор вопроса

Никита Чеботов
как вариант над картинкой наложить блок с контенто...

Делал через градиент) но box shadow криво работает)

06.12.2021

Maks
Делал через градиент) но box shadow криво работает...

зачем box shadow?

06.12.2021

Maks Автор вопроса

Никита Чеботов
зачем box shadow?

На макете так)

06.12.2021

Никита Чеботов
тоже градиентом сделать

Maks
На макете так)

тоже градиентом сделать

06.12.2021

Maks Автор вопроса

Градиентом тени можно сделать?

06.12.2021

Maks
Градиентом тени можно сделать?

4 цвета 1й и 2й можно взять пипеткой 3й, тот что вроде как тень на прозрачной, взять такой же цвет как во втором но сделать почти прозрачным 4й цвет полностью прозрачный

06.12.2021

Maks
Градиентом тени можно сделать?

06.12.2021

Maks Автор вопроса

Так весь блок надо) а тут только слева

06.12.2021

Maks
Так весь блок надо) а тут только слева

ну тут у меня 2 тени, слева на прозрачной части и справа на красной на твоём скрине других теней не увидел

06.12.2021

Maks
Так весь блок надо) а тут только слева

вот с тенью по всему блоку

06.12.2021