Я хочу создать два divs, которые перемещаются слева друг к другу, однако с наклонной угловой границей, разделяющей их. Я прикрепил фотографию, чтобы продемонстрировать, что я имею в виду.Смежные divs с угловыми границами?
Кто-нибудь знает, если что-то подобное можно с помощью CSS (отрезав содержимое с переливом: скрытый я думаю)
Эти дивы должны содержать изображения, которые получают отрезаны от границы , вот пример:
Попробуйте
.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 с изображениями
.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>выглядит хорошо, но одно предостережение. Я действительно хочу, чтобы у div было изображение в нем, которое будет отрезано угловым краем. Когда я добавляю фотографию к вашему коду, он не поддерживает угол :( – Mark
, которого не было в требованиях :) –
Вы правы, я обновил исходное сообщение, чтобы лучше описать то, что я искал. Спасибо за попытку! – Mark
Вы можете написать так:
.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);
}
Проверьте это http://jsfiddle.net/EJxFg/4/
Все решения до сих пор зависят от наличия действительно толстой угловой границы для разделения фотографий.
Чтобы избежать этого, вы должны сделать контейнер и перекосить его. Затем счетчик искажает изображение в противоположном направлении.
Вот CodePen http://cdpn.io/azvsA, но суть его заключается в следующем:
.container {
border-right: 10px solid white;
overflow: hidden;
transform (skewX(-20deg));
}
.image {
transform (skewX(20deg));
}
Какие браузеры вы должны поддерживать? Вам нужно поддерживать более старые версии IE? – thirtydot
@thirtydot не нужно поддерживать старый IE :) – Mark