div liền kề với đường viền góc cạnh?

Question

Tôi muốn tạo hai div được làm nổi bên trái với nhau, tuy nhiên với một đường viền nghiêng nghiêng tách chúng ra. Tôi đã đính kèm một bức tranh để chứng minh những gì tôi có ý nghĩa.

Có ai biết nếu một cái gì đó như thế này là có thể với CSS (cắt đứt nội dung với một overflow: hidden tôi đoán)

Những divs cần phải chứa hình ảnh mà có được cắt đứt bởi biên giới , đây là một ví dụ:

Answer 1

Hãy thử điều này

.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>

---

CẬP NHẬT với hình ảnh

.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>

Answer 2

Bạn có thể viết như thế này:

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

Kiểm tra điều này http://jsfiddle.net/EJxFg/4/

Answer 3

Tất cả các giải pháp cho đến nay phụ thuộc vào việc có đường viền góc thực sự dày để chia ảnh.

Để tránh điều này, bạn sẽ tạo một vùng chứa và nghiêng nó. Sau đó, truy cập nghiêng hình ảnh theo hướng ngược lại.

Dưới đây là một CodePen http://cdpn.io/azvsA, nhưng các ý chính của nó là như sau:

.container { 
    border-right: 10px solid white; 
    overflow: hidden; 
    transform (skewX(-20deg)); 
} 

.image { 
    transform (skewX(20deg)); 
}