Как я могу создать неправильную форму в CSS без изображения? [закрыто]

Я хотел бы создать неправильную форму в CSS, как показано ниже. Я хочу полностью избежать использования изображения в качестве фона. Пожалуйста, помогите мне в этом отношении .. Спасибо

Биджишвведите описание изображения здесь

Этот вопрос кажется не по теме, потому что он касается CSS. Вместо этого попробуйте опубликовать на Stack Overflow .
Вы можете написать форму SVG прямо в коде.

Ответы (2)

В настоящее время это невозможно с помощью CSS. Самое близкое, что я знаю, это экспериментальная функция, которая позволяет вам вписывать текст в фигуру, но пока она очень плохо поддерживается.

Adobe HTML: фигуры

Пример фигур CSS

Если вы загружаете его в браузер, который его поддерживает, то пользовательская форма ворона устанавливается исключительно с помощью CSS. Вот стиль префикса webkit:

-webkit-shape-inside: polygon(59.015% 76.618%, 49.316% 72.894%, 35.699% 69.153%, 26.106% 58.415%, 20.799% 48.452%, 16.814% 38.447%, 16.595% 26.175%, 18.384% 21.205%, 18.719% 18.314%, 18.022% 17.236%, 16.997% 15.669%, 15.588% 13.887%, 13.017% 12.713%, 9.541% 12.314%, 0.469% 10.522%, 0.000% 9.789%, 11.564% 5.846%, 13.017% 5.484%, 15.253% 4.942%, 21.179% 1.780%, 24.165% 0.000%, 33.508% 0.000%, 38.364% 2.949%, 42.507% 6.335%, 49.130% 11.182%, 54.641% 17.128%, 58.535% 18.696%, 76.920% 38.014%, 79.253% 45.400%, 83.900% 59.241%, 84.697% 63.008%, 87.793% 70.424%, 91.912% 79.192%, 98.501% 89.538%, 97.737% 90.015%, 97.149% 89.675%, 96.576% 90.782%, 97.177% 92.724%, 100.000% 97.907%, 96.912% 99.884%, 94.298% 97.546%, 92.174% 97.456%, 78.240% 97.907%, 69.457% 86.842%, 62.881% 80.381%, 59.015% 76.618%, 59.015% 76.618%);

Однако это только для применения формы к тексту. В настоящее время вы не можете стилизовать эту фигуру, например добавить цвет фона или обводку. Как предлагает Паоло, для этого можно использовать SVG, который встроен в HTML5 .

Я думаю, вы могли бы сделать то, что он просит; с фигурами css3; см. ниже.

Вы можете сделать что-то подобное с css — попробуйте эти ссылки для ознакомления с формами, разработанными с помощью css: http://css-tricks.com/examples/ShapesOfCSS/ или: http://www.css3shapes.com/ введите описание изображения здесь

Кроме того, вам придется поэкспериментировать с box-shadows.

(этот вопрос, как указывает @ckpepper02, лучше подходит для переполнения стека, и вы можете начать с поиска там «css shape». Вы найдете кое-что интересное).