Как реализовать такой дизайн меню в CSS?

Question

[Akakiy1880]

Не получается создать верхнее закругление(возле Blog и E-mail) данного меню только на css без картинок. Как это можно реализовать?

Comments

[Шохрух Шаймардонов]

А как уже получилось? Поделитесь имеющимися достижениями, вдруг накинут идей на базе имеющегося.
З.ы. лушче сразу в песочницу, а не код под спойлером.
З.з.ы. можете изменить сам вопрос, а не в ответах/комментах писать, ибо сегодня у ребят в тренде это

Answer 1

[Илья Савиных]

Вообще "закруглялки" делаются с помощью border-radius: 5px 0 0 0;
Чтобы было более понятнее:
border-radius: "правый верхний угол" | "правый нижний угол" | "левый нижний угол" | "левый верхний угол"
ИЛИ

border-top-right-radius: 5px;
borde-top-left-radius: 5px;
borde-bottom-right-radius: 5px
borde-bottom-left-radius: 5px

Также
border-radius: 5px;
Это округлит все углы на 5px

Comments

[Akakiy1880]

Про это я знаю, я не знаю как сделать именно такое закругление как в макете, ведь отрицательные значения border-radius не применяет.

[Илья Савиных]

Akakiy1880, видимо там блок родительский, в котором 3 блока, для первого применён радиус top-right, а для третьего блока top-left... Может быть так..

[Akakiy1880]