CSS para criar canto curvo entre dois elementos?

Question

Minha interface do usuário tem uma lista não ordenada à esquerda. Quando um item de lista é selecionado, um div aparece à direita disso. Eu gostaria de ter uma curva Canto externo onde o <li> e a <div> encontrar. Algumas pessoas chamam isso de raio da borda negativa ou um Canto invertido. Veja a seta branca na imagem abaixo.

Para estender o azul <li> até a borda do <ul>, Estou planejando fazer algo assim:

li { 
    right-margin: 2em; 
    border-radius: 8px; 
}

li.active { 
    right-margin: 0; 
    border-bottom-right-radius: 0; 
    border-top-right-radius: 0;
}

Existe uma maneira melhor de estender o <li> até a borda do <ul>? Obviamente, incluirei o Raio de Borda de Web e Mozilla CSS também.

A principal coisa que eu não tenho certeza é que Canto externo sob o canto inferior direito do ativo <li>. Eu tenho algumas idéias, mas elas parecem hacks. Alguma sugestão?

Observe que o <ul> é indicado em cinza, mas seria branco no design real. Além disso, estou planejando usar JavaScript para posicionar o <div> corretamente quando um <li> é selecionado.

Answer 1

Bem, como se vê, eu mesmo consegui resolver o problema. Eu invadi uma demonstração - Confira.

Essencialmente, vários elementos DOM adicionais são necessários e uma quantidade razoável de CSS. E, como mencionado no link fornecido pelo @steve, é necessário um fundo sólido. Não acredito que haja alguma maneira de fazer isso em um fundo de gradiente ou outro padrão.

Acabei com HTML assim:

ul.selectable {
  padding-top: 1em;
  padding-bottom: 1em;
  width: 50%;
  float: left;
}
ul.selectable li {
  margin: 0 3em 0 4em;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
  -moz-border-radius: 8px;
}
ul.selectable li.active {
  margin-right: 0;
}
ul.selectable li.active dl {
  background-color: #4f9ddf;
}
ul.selectable li dt {
  background-color: #dfd24f;
  padding: 1em;
  margin-left: -2em;
  margin-right: -2em;
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
ul.selectable li dd {
  padding: 0.25em;
  background-color: #fff;
}
ul.selectable li.active dt {
  background-color: #4f9ddf;
  margin-right: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -khtml-border-top-right-radius: 0;
  -khtml-border-bottom-right-radius: 0;
  -moz-border-radius-topright: 0;
  -moz-border-radius-bottomright: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
ul.selectable li.active dd.top {
  -webkit-border-bottom-right-radius: 8px;
  -khtml-border-bottom-right-radius: 8px;
  -moz-border-radius-bottomright: 8px;
  border-bottom-right-radius: 8px;
}
ul.selectable li.active dd.bot {
  -webkit-border-top-right-radius: 8px;
  -khtml-border-top-right-radius: 8px;
  -moz-border-radius-topright: 8px;
  border-top-right-radius: 8px;
}
div.right {
  float: left;
  padding-top: 3em;
  width: 50%;
}
div.content {
  height: 15em;
  width: 80%;
  background-color: #4f9ddf;
  padding: 1em;
  -webkit-border-radius: 8px;
  -khtml-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}

<ul class="selectable">
  <li>
    <dl>
      <dd class="top"></dd>
      <dt>Title</dt>
      <dd class="bot"></dd>
    </dl>
  </li>
  <li class="active">
    <dl>
      <dd class="top"></dd>
      <dt>Title</dt>
      <dd class="bot"></dd>
    </dl>
  </li>
  <li>
    <dl>
      <dd class="top"></dd>
      <dt>Title</dt>
      <dd class="bot"></dd>
    </dl>
  </li>
</ul>
<div class="right">
  <div class="content">This is content</div>
</div>

Não otimizei nenhum dos CSs, pois acabei de invadi -lo. Mas talvez isso ajude outra pessoa. Eu só testei isso no Google Chrome no Mac OSX.

Answer 2

Solução mais limpa (menos código e Gradiente de fundo permitido)

Veja o violino (ou outro), que está usando este HTML:

<ul class="selectable">
    <li>Title</li>
    <li class="active">Title</li>
    <li>Title</li>
    <li>Title</li>
</ul>
<div class="right">
    <div class="content">This is content</div>
</div>

E este CSS (a chave é permitir o border-radius e border-width nos elementos pseudo-elementos para fazer o círculo invertido para você; Eu omiti o gradient código.):

ul.selectable {
    padding-top: 1em;
    padding-bottom: 1em;
    width: 50%;
    float: left;
}
ul.selectable li {
    margin: 1em 1em 1em 2em;
    padding: 1em;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    background-color: #dfd24f;
    position: relative;
}
ul.selectable li.active {
    margin-right: 0;
    background-color: #4f9ddf;
    -webkit-border-top-right-radius: 0;
    -webkit-border-bottom-right-radius: 0;
    -khtml-border-top-right-radius: 0;
    -khtml-border-bottom-right-radius: 0;
    -moz-border-radius-topright: 0;
    -moz-border-radius-bottomright: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

ul.selectable li.active:before,
ul.selectable li.active:after {
    content: '';
    position: absolute;
    left: 100%; /* I use this instead of right: 0 to avoid 1px rounding errors */
    margin-left: -8px; /* I use this because I am using left: 100% */
    width: 8px;
    height: 8px;
    border-right: 8px solid #4f9ddf;
    z-index: -1;    
}

ul.selectable li.active:before {
    top: -8px;
    border-bottom: 8px solid  #4f9ddf;
    -webkit-border-bottom-right-radius: 16px;
    -khtml-border-bottom-right-radius: 16px;
    -moz-border-radius-bottomright: 16px;
    border-bottom-right-radius: 16px;
}
ul.selectable li.active:after {
    bottom: -8px;
    border-top: 8px solid  #4f9ddf;
    -webkit-border-top-right-radius: 16px;
    -khtml-border-top-right-radius: 16px;
    -moz-border-radius-topright: 16px;
    border-top-right-radius: 16px;
}
div.right {
    float: left;
    padding-top: 3em;
    width: 50%;
}
div.content {
    height: 15em;
    width: 80%;
    background-color: #4f9ddf;
    padding: 1em;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

Answer 3

Cheguei a uma solução que requer menos marcação. Em resumo, em vez de usar margens, ele usa bordas arredondadas brancas, depois posicionamos o li ativo atrás das fronteiras brancas arredondadas para alcançar o efeito invertido do radiato da fronteira.

http://jsfiddle.net/zrmw8/

<ul class="selectable">
    <li>
        <a href="#">Title</a>
    </li>
    <li class="active">
        <a href="#">Title</a>
    </li>
    <li>
        <a href="#">Title</a>
    </li>
    <li>
        <a href="#">Title</a>
    </li>
</ul>
<div class="right">
    <div class="content">This is content</div>
</div>

E menos CSS também! (Isso é flexível à mente):

a { color: #000; text-decoration: none;}

ul.selectable {
    padding: 1em 1em;
    width: 40%;
    float: left;
}

ul.selectable li {
    margin:  -1em 0 0 0;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    border: solid #fff 1em;
    position: relative;
}

ul.selectable li a {
   background-color: #dfd24f;
    padding: 1em;
    display: block;
       border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
}

ul.selectable li.active {
    margin: -1em -1em -1em 1em;
    border: solid #4f9ddf 1em;
    border-left: solid #fff 1em;
    background-color: #4f9ddf;
    position: static;
}

ul.selectable li.active a {
    margin: 0 0 0 -1em;
    border-left: solid #4f9ddf 1em;
    background-color: #4f9ddf;
    position: static;
    text-indent: -1em;
}

div.right {
    float: left;
    padding-top: 3em;
    width: 50%;
    margin-left: -1em;
}
div.content {
    height: 15em;
    width: 80%;
    background-color: #4f9ddf;
    padding: 1em;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}

Para lhe dizer a verdade, não tenho certeza se é uma versão melhor, ela facilita o gradiente/imagem dos fundos (pelo menos para Li não ativos), mas você não pode aplicar um fundo de imagem/gradiente ao corpo. É também "má mágica" no sentido de que funciona de maneira não intuitiva.

Answer 4

Na verdade não, desculpe, por

Inverter canto arredondado no CSS?

Answer 5

Para fazer isso com um BG não sólido, não acho que você possa fazer isso com o CSS, mas você pode usar tela ou SVG no mesmo efeito - não exatamente o que você pediu.

No entanto, parece haver um proposta para raio de borda negativo Isso resolveria o problema. Talvez algum dia, certo.

Answer 6

Tão bom Raio de fronteira inversa no tutorial CSS poderia fazer o truque. Explica como fazer raio de borda inversa para guias. Mas pode ser facilmente adaptado para otimizar seu CSS, pois ele usa :after Em vez de criar muitos elementos extras.