Как нарисовать полукруг в CSS?
jsfiddle.net/ffvv40wr/1
Можно реализовывать как с помощью border-radius, так и с помощью SVG.
Безусловно, оба варианта лучше использовать в фоне, иначе придётся задавать абсолютное позиционирование (или фиксированное, что ещё хуже).
Использование SVG даёт преимущество — задав только высоту и ширину, можно не беспокоиться про радиус закругления (что и видно на 3-м примере, когда для :before придётся менять ширину).
или border radius