Как сделать такие уголки на css?

Question

[pshuyanova]

Добрый день!
Не могу сообразить, как сделать подобные уголки у пунктов в сайдбаре. Когда пункт меню активен, скругляются уголки у соседних пунктов. Буду благодарна за подсказку!

Comments

[Сергей Сергей]

Пусть скругления будут у всех пунктов, а выделенный пункт изменяет не только фоновый цвет, но и тень вокруг, и, чтобы скругления оказались над подсвеченным тенью фоном, уменьшать z-index выделенного.

Answer 1

[Ankhena]

Псевдоэлементами с радиальным градиентом
По аналогии с https://codepen.io/AnnaSummer/pen/GRyVzeY

Comments

[pshuyanova]

Реализовала этим способом. Отлично подошло решение! Спасибо!

[Ankhena]

pshuyanova, решение с тенями тоже хорошее.

Answer 2

[Сергей Сергей]

Comments

[Ankhena]

Если бы навигация не была бы дивами, а размеры в mm, то было бы даже чудесно.

[Сергей Сергей]

Ankhena, "зри в корень принцип", ящитаю.

[Ankhena]

Сергей Сергей, да я за, тоже так делаю. Правда тогда стараюсь показать совсем абстракцию, чтобы так просто не скопировать было.
Но новички потом тянут в проект то, что увидели целиком, не разбираясь :(
А потом ещё спорят с сильными аргументами "я читал, там так советуют" :(

Поэтому лучше не показывать хотя бы откровенно плохое, типа размеров в mm.

[Сергей Сергей]

Ankhena, нуууу, современные размерности я ещё не осознал до конца, миллиметры предпочитаю за их "инженерность", _ахаха.

[Ankhena]

Сергей Сергей, к инженерности они не имеют никакого отношения

Почему в сантиметре cm содержится ровно 38 пикселей?
В реальной жизни сантиметр – это эталон длины, одна сотая метра. А пиксель может быть разным, в зависимости от экрана.

Но в формулах выше под пикселем понимается «сферический пиксель в вакууме», точка на «стандартизованном экране», характеристики которого описаны в спецификации.

Поэтому ни о каком соответствии cm реальному сантиметру здесь нет и речи. Это полностью синтетическая и производная единица измерения, которая не нужна.

https://learn.javascript.ru/css-units

[Сергей Сергей]

Ankhena, инженерия шире экранчиков в электронике, моё пристрастие к миллиметрам оттуда, где ГОСТы правят бал. Но и, в целом, размер миллиметров на среднем устройстве вполне удовлетворителен, где-то 8/10, потому не думаю, что откажусь от них для иллюстративных нужд.

[Ankhena]

Сергей Сергей, дело ваше, если сознательно.

Answer 3

[Владислав Великоиваненко]

Ну первое, что пришло в голову, это просто в зависимости от выбранного пункта меню, скруглять нижний правый угол у вышестоящего блока с пунктом меню и скруглять верхний правый у нижестоящего блока, через js можно это прописать, а в CSS:

.top-block{
   border-bottom-right-radius: 5px;
}

.bottom-block{
   border-top-right-radius: 5px;
}

Типо такого

Answer 4

[wadowad]

На данный момент мой пример не работает. Но заработает, когда селектор has будет поддерживаться браузерами.

li {
  background-color: gray;
}
li:hover {
  background-color: white;
  border-radius: 10px 0 0 10px;
}
li:hover + li {
  border-radius: 0 10px 0 0;
}
li:has(+ li:hover) {
  border-radius: 0 0 10px 0;
}