Как нарисовать изогнутую линию на css?

Question

[Reiters]

Требуется свёрстать такой элемент

Кто знает наиболее лаконичное решение без картинок и js только на css

Answer 1

[Дмитрий Ермолаев]

решение через один элемент и два псевдоэлемента:
codepen.io/iusfof/pen/onBve?editors=110

Comments

[Дмитрий Ермолаев]

@SelenIT2 для 8 версии для поддержки border-radius можно подключить вот такую штуку css3pie.com , она много чего еще добавляет для ie8

[Дмитрий Ермолаев]

@Sergio-Jooom про семерку говорить вообще не стоит по-моему)

[Дмитрий Ермолаев]

@SelenIT2 caniuse.com/#search=before другое дело, что ie8 не поддерживает :before

[Дмитрий Ермолаев]

@SelenIT2 согласен, полностью. но главное, чтоб заказчик был с этим согласен

[Евгений Петров]

@iusfof дело в том, что IE8 поддерживает :before.

[Дмитрий Ермолаев]

@Petroveg а, да, виноват c2n.me/j7bP7Y написал before и ожидая, что первым результатом в выдаче будет именно поддержка before, увидел, что ie8 не поддерживается, а на название результата не посмотрел

Answer 2

[Антон Шаманов]

htmlbook.ru/css/border-radius

Answer 3

[Иван Погорелов]

проще на svg. это векторная графика. вставляется на страницу, как текст, рисуется мышкой в онлайн редакторах. удобная штука.

Comments

[Евгений Петров]

@Sergio-Jooom глупости говорите.

Answer 4

[Евгений Петров]

jsfiddle.net/petroveg/9s5xv3zt/1

Вот с помощью SVG. Напрямую в UTF-8 не понимает IE (до сих пор).
Ну а тот же код, конвертированный в Base64, понимают все (IE с 9-й версии).

Comments

[Евгений Петров]

SelenIT2: Я вот про это — url(data:image/svg+xml;utf8,код_SVG_без_символов_#_в_значениях_цвета). Это не понимает IE любой версии. А если перекодировать SVG в base64 (символы # уже не имеют значения), то url(data:image/svg+xml;base64,перекодированный_код_SVG) понимают все.