Как сделать чтобы получилась такой background?

Question

[Qairat]

Всем привет!
Помогите не могу сделать такой стиль сзади текста.
Подскажите.
Как border во внутрь сделать?
Или можно по другому? Киньте хотя бы ссылку.
Спасибо!

Answer 1

[iam_from_russia]

background-image: linear-gradient(to right, yellow 33%, white 66%, yellow);
Треугольники можно сделать из рамок другого (псевдо) элемента. Ширина и высота элемента: 0. У всех рамок кроме одно прозрачный цвет. Ну и box-shadow снизу.

Comments

[Qairat]

можете написать как сделать волнистые border-ы?

[iam_from_russia]

Я бы попытался продублировать какое нибудь маленькое изображение "волны", с помощью border-image. Описание этого свойства можно найти на том же сайте webref.ru

Answer 2

[Андрей]

Можно с помощью SVG

Comments

[Qairat]

емое как сделали?) что-то там кодов много

[Андрей]

В данном конкретном случае сделано с помощью CorelDRAW, а так подходит любой векторный редактор умеющий экспортировать в SVG

Answer 3

[Максим]

а где там бордюр внутри ?
видно что у блока есть фон , цвет типа #fefefe или что то в этом духе

Answer 4

[Александр Ружевич]

а чем картинка не устраивает в качесве фона?
background-size:contain;
и фон будет всегда внутри элемента