Separare 2 div con la linea di pendenza

Question

Desidero separare 2 div floating con una linea di pendenza, hanno colori di sfondo diversi.

Esempio qui:

markup HTML:

<div id="wrap"> 
    <div id="one"></div> 
    <div id="two"></div> 
</div> 

i allready cercato di ruotare (come u può vedere nella jsFiddle):

#wrap div { 
    -moz-transform: rotate(20deg); 
    -ms-transform: rotate(20deg); 
    -o-transform: rotate(20deg); 
    -webkit-transform: rotate(20deg); 
    float:left; 
    width:50%; 
    height:200px; 
} 

http://jsfiddle.net/F6DgA/

Anche io ho provato con smth. con overflow:hidden: http://jsfiddle.net/F6DgA/1/ (parte Corrent, ma non una soluzione molto pulita)

C'è un modo più semplice (dont uso wann un'immagine ..)?

Answer 1

avrei Evitare personalmente di utilizzare le trasformazioni e utilizzare invece la proprietà border. Questo mi sembra molto più pulito (e funziona anche in IE8).

Esempio: http://jsfiddle.net/F6DgA/5/

Nota: per assicurarsi che il contenuto all'interno del div non galleggia sulla parte superiore del bordo, aggiungere qualcosa di simile * { box-sizing:border-box; } e poi un'imbottitura sinistra/destra per div.

Il CSS:

#wrap { 
    width:300px; 
    height:100px; 
    margin:0 auto; 
    position:relative; 
} 

#wrap div { 
    position:relative; 
    height:100%; 
    float:left; 
} 

#one { 
    background:#333; 
    width:calc(50% + 15px); 
} 

#one:after { 
    content:""; 
    position:absolute; 
    right:0; 
    border-right:30px solid black; 
    border-top:100px solid transparent; 
} 

#two { 
    background:#000; 
    width:calc(50% - 15px); 
} 

Answer 2

è possibile utilizzare elemento pseudo: dopo o: prima

CODEPEN

<div class="rect"></div> 

.rect { 
      background:#000; 
      height: 50px; 
      width: 150px; 
      position: relative; 
      overflow: hidden; 
     } 
     .rect:after { 
      content: ""; 
      background:#333; 
      height: 100px; 
      width: 300px; 
      -moz-transform: rotate(-45deg); 
      -ms-transform: rotate(-45deg); 
      -webkit-transform: rotate(-45deg); 
      -o-transform: rotate(-45deg); 
      transform: rotate(-45deg); 
      display: block; 
      position: absolute; 
      top:-7px; 
      right: 10px; 

     } 

Answer 3

gradiente Usare CSS per il #wrap div, check here for an example.

Qualcosa di simile a questo:

background: #9dd53a; 
background: -moz-linear-gradient(-45deg, #9dd53a 0%, #a1d54f 50%, #80c217 51%, #7cbc0a 100%); 
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#9dd53a), color-stop(50%,#a1d54f), color-stop(51%,#80c217), color-stop(100%,#7cbc0a)); 
background: -webkit-linear-gradient(-45deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); 
background: -o-linear-gradient(-45deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); 
background: -ms-linear-gradient(-45deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); 
background: linear-gradient(135deg, #9dd53a 0%,#a1d54f 50%,#80c217 51%,#7cbc0a 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dd53a', endColorstr='#7cbc0a',GradientType=1); 

Answer 4

fanno riferimento a questo css Shape examples!

Questo è quello che ho provato. Demo here!
Non è esattamente lo stesso con il tuo bisogno.
Ma penso, puoi avvicinarti al tuo bisogno con una piccola modifica!

html

<div Id="parallelogram"></div> 
<div Id="parallelogram2"></div> 

css

#parallelogram { 
    width: 130px; 
    height: 75px; 
    background: pink; 
    position:absolute; 
    overflow:hidden; 
    /* Skew */ 
    -webkit-transform: skew(-20deg); 
    -moz-transform: skew(-20deg); 
    -o-transform: skew(-20deg); 
    transform: skew(-20deg); 
} 

#parallelogram2 { 
    width: 130px; 
    height: 75px; 
    margin-left:100px; 
    background: Black; 
    position:absolute; 
    overflow:hidden; 
    /* Skew */ 
    -webkit-transform: skew(-20deg); 
    -moz-transform: skew(-20deg); 
    -o-transform: skew(-20deg); 
    transform: skew(-20deg); 
} 

Answer 5

Qualunque sia l'altezza e la larghezza avere il div genitore si deve doppia altezza del vostro elemento secondario. Dopo di ciò dai position:absolute ai tuoi elementi figli. Dare -50% la posizione a sinistra per il vostro primo div bambino e dare -50% giusta posizione per il secondo div bambino

CSS sarà come segue:

#wrap { 
    width:400px; 
    margin:0 auto; 
    position:relative; 
    height:300px; 
    overflow:hidden; 
} 

#wrap div { 
    -moz-transform: rotate(20deg); 
    -ms-transform: rotate(20deg); 
    -o-transform: rotate(20deg); 
    -webkit-transform: rotate(20deg); 
    float:left; 
    width:100%; 
    height:600px; 
    top:-50%;  
    position:absolute; 
} 
#wrap div#one { left:-50%; } 
#wrap div#two { right:-50%; } 

#one { 
    background:#333; 
} 

#two { 
    background:#000; 
} 

Si prega di controllare questo Working URL

Answer 6

Demo

css

#one { 
    border-top: 200px solid gray; 
    border-right: 100px solid transparent; 
    height: 0; 
    width: 30%; 
    float:left 
} 
#two { 
    border-bottom: 200px solid black; 
    border-left: 100px solid transparent; 
    height: 0; 
    width: 30%; 
    float:left; 
    margin-left:-100px; 
} 
#wrap { 
    width:400px; 
    margin:0 auto; 
}