Мой пользовательский интерфейс имеет неупорядоченный список слева. Когда выбран элемент списка, справа от него появляется div. Я хотел бы иметь изогнутый внешний угол, где встречаются <li> и <div>. Некоторые люди называют это отрицательным радиусом границы или перевернутым углом. См. Белую стрелку на изображении ниже.
Чтобы увеличить синий <li> до края <ul>, я планирую сделать что-то вроде этого:
li {
right-margin: 2em;
border-radius: 8px;
}
li.active {
right-margin: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
Есть ли лучший способ расширить <li> до края <ul>? Очевидно, что я также включу CSS-код webkit и mozilla.
Главное, что я не уверен в том, что внешний угол находится внизу нижнего правого угла активного <li>. У меня есть некоторые идеи, но они кажутся хаками. Любые предложения?
ЗАМЕЧАНИЕ, что <ul> обозначается серым, но в реальном дизайне он будет белым. Кроме того, я планирую использовать Javascript, чтобы правильно позиционировать <div>, когда выбран <li>.
