Как нарисовать полукруг в CSS?

Question

[whist94]

Точнее 200px ширины от его полных 500px. Какие свойства и как задать

Answer 1

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

jsfiddle.net/ffvv40wr/1

Можно реализовывать как с помощью border-radius, так и с помощью SVG.
Безусловно, оба варианта лучше использовать в фоне, иначе придётся задавать абсолютное позиционирование (или фиксированное, что ещё хуже).

Использование SVG даёт преимущество — задав только высоту и ширину, можно не беспокоиться про радиус закругления (что и видно на 3-м примере, когда для :before придётся менять ширину).

Comments

[extempl]

Только нужно было размеры привести к одному виду, а то выглядит странно: jsfiddle.net/ffvv40wr/2

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

@extempl выглядит ровно так, как я и хотел показать.

[John]

Евгений Петров: не могу понять, а как перевернуть по горизонтали?

Answer 2

[Lici]

или border radius