My UI has
an unordered list on the left. When a list item is selected, a div appears on the right of it. I'
d like
to have a curved outer corner where the <li> and the <div> meet. See the white arrow in the image below.
To extend the blue <li>
to the edge of the <ul>, I'm planning
to do something like this:
li {
right-margin: 2em;
border-radius: 8px;
}
li.active {
right-margin: 0;
border-bottom-right-radius: 0;
border-top-right-radius: 0;
}
Is there a better way
to extend the <li>
to the edge of the <ul>? Obviously, I'll include the webkit and mozilla border radius CSS as well.
The main thing I'm unsure about is that outer corner underneath the bottom right corner of the active <li>. I have some ideas, but they seem like hacks. Any suggestions?
NOTE that the <ul> is indicated in grey, but it would be white in the real design. Also, I'm planning
to use Javascript
to position the <div> correctly when
an <li> is selected.
