Voglio creare due div che sono flottanti l'uno a sinistra, ma con un bordo inclinato inclinato che li separa. Ho allegato un'immagine per dimostrare cosa intendo.Div att adiacenti con bordi angolati?
Qualcuno sa se una cosa del genere è possibile con i CSS (tagliare il contenuto con un overflow: hidden immagino)
Questi div devono contenere immagini che vengono tagliati fuori dal confine , ecco un esempio:
Prova questa
.left, .right {
position: relative;
height: 100px;
width: 200px;
background: #000;
float: left;
}
.left:after {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 100px solid #000;
border-bottom: 50px solid transparent;
border-left: 0px solid transparent;
border-right: 50px solid transparent;
position: absolute;
top: 0;
right: -50px;
}
.right {
margin-left: 60px;
width: 100px;
}
.right:before {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 100px solid #000;
border-left: 50px solid transparent;
border-right: 0px solid #000;
position: absolute;
top: -50px;
left: -50px;
}<div class="left"> </div>
<div class="right"> </div>UPDATE con immagini
.left, .right {
background: #000 url('http://lorempixel.com/300/100');
position: relative;
height: 100px;
width: 250px;
float: left;
}
.left:after {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 100px solid #fff;
border-left: 30px solid transparent;
border-right: 0 solid #fff;
position: absolute;
top: -50px;
right: 0;
}
.right {
background: #000 url('http://lorempixel.com/200/100');
width: 150px;
}
.right:before {
content: '';
line-height: 0;
font-size: 0;
width: 0;
height: 0;
border-top: 100px solid #fff;
border-bottom: 50px solid transparent;
border-left: 0px solid transparent;
border-right: 30px solid transparent;
position: absolute;
top: 0;
left: 0;
}<div class="left"> </div>
<div class="right"> </div>sembra buono, ma un avvertimento. In realtà voglio che il div abbia un'immagine che verrà tagliata dal margine angolato. Quando aggiungo una foto al tuo codice non mantiene l'angolo :( – Mark
che non era nei requisiti :) –
hai ragione, ho aggiornato il post originale per descrivere meglio quello che stavo cercando. Grazie per lo sforzo! – Mark
Si può scrivere in questo modo:
.left, .right {
background: #000 url('http://lorempixel.com/300/100');
position: relative;
height: 100px;
width: 250px;
float: left;
}
.left{
z-index:1;
}
.parent{
overflow:hidden;
}
.right {
background: #000 url('http://lorempixel.com/200/100');
width: 150px;
}
.left:after{
content:'';
position:absolute;
border-right:20px solid #fff;
top:-25px;
bottom:-10px;
left:0;
right:-10px;
-moz-transform:rotate(10deg);
-webkit-transform:rotate(10deg);
}
Controllare questo http://jsfiddle.net/EJxFg/4/
Tutte le soluzioni finora dipendono dall'avere un bordo angolato molto spesso per dividere le foto.
Per evitare ciò, si crea un contenitore e lo si inclina. Quindi contrastare l'inclinazione dell'immagine nella direzione opposta.
Ecco un CodePen http://cdpn.io/azvsA, ma l'essenza di esso è la seguente:
.container {
border-right: 10px solid white;
overflow: hidden;
transform (skewX(-20deg));
}
.image {
transform (skewX(20deg));
}
Quali browser hai bisogno per sostenere? Hai bisogno di supportare versioni precedenti di IE? – thirtydot
@thirtydot non è necessario supportare il vecchio IE :) – Mark