CSS per creare angolo curvo tra due elementi?

Question

Il mio UI ha una lista non ordinata a sinistra. Quando si seleziona un elemento della lista, viene visualizzato un div sulla destra di esso. Mi piacerebbe avere un angolo esterno curvo , dove il <li> e la <div> si incontrano. Alcune persone chiamano questo un raggio confine negativi o un angolo invertito . Vedere la freccia bianca nell'immagine qui sotto.

Per prolungare la <li> azzurro al bordo del <ul>, sto pensando di fare qualcosa di simile:

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

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

C'è un modo migliore per estendere la <li> al bordo della <ul>? Ovviamente, io includo il raggio CSS WebKit e Mozilla confine pure.

La cosa principale che sono sicuro circa è che angolo esterno sotto l'angolo in basso a destra del <li> attiva. Ho alcune idee, ma sembrano come hack. Qualche suggerimento?

Si noti che il <ul> è indicato in grigio, ma sarebbe bianca nella progettazione vera e propria. Inoltre, sto pensando di utilizzare Javascript per posizionare il <div> correttamente quando si seleziona un <li>.

Answer 1

Bene, a quanto pare, sono riuscito a risolvere il problema io stesso. Ho messo insieme una demo - controllarlo fuori

.

In sostanza, diversi elementi DOM aggiuntivi sono necessari e una discreta quantità di CSS. E come indicato nel link fornito da @Steve, è necessario un solido background. Non credo ci sia un modo per fare questo nel corso di un gradiente di sfondo o un altro modello.

Ho finito con HTML in questo modo:

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>

Non ho ottimizzato qualsiasi dei CSS come ho appena hackerato insieme. Ma forse sarà aiutare qualcun altro. Ho provato solo questo in Google Chrome su Mac OSX.

Answer 2

Cleaner Solution (meno codice e sfondo sfumato ammessi )

Vedere il violino (o un'altra ), che sta usando questo 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 questo css (la chiave è quello di consentire la border-radius e border-width sugli pseudo-elementi per rendere il cerchio invertita per voi, ho omesso il codice gradient.):

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

mi si avvicinò con una soluzione che richiede meno di markup. In sintesi, invece di usare margini esso utilizza bordi arrotondati bianchi, poi posizionare il li attiva dietro le bianche bordi arrotondati per ottenere l'effetto border-radius invertito.

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 meno CSS troppo! (Questa è la mente di flessione):

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;
}

A dire la verità non sono sicuro che sia una versione migliore, non rendere il gradiente / immagine sfondi facile (per li non attiva di, almeno), ma non è possibile applicare un'immagine / sfondo sfumato al corpo. E 'anche "cattivo magica" en senso che funziona in modo non intuitivo.

Answer 4

Non proprio, mi dispiace, per

Inverti angolo arrotondato in CSS?

Answer 5

Per fare questo nel corso di un non-solido bg, non credo che si può fare con i CSS, ma si potrebbe utilizzare tela o SVG per lo stesso effetto -. Non è esattamente quello che hai chiesto, anche se

Tuttavia, ci sembra essere un proposta di raggio confine negativo che risolverebbe il problema. Forse qualche giorno, giusto.

Answer 6

Questa bella Inverse Border Radius in CSS esercitazione potrebbe fare il trucco. Spiega come fare raggio confine inversa per le schede. Ma potrebbe essere facilmente adattato per ottimizzare il CSS in quanto utilizza :after invece di creare troppi elementi aggiuntivi.