cách đạt được đường viền đôi với các div liền kề có trang trí đường viền góc cạnh

Question

Tôi đang cố gắng tạo ba thùng chứa riêng biệt với loại cảm xúc "truyện tranh". Tôi muốn kết quả cuối cùng để trông giống như hình ảnh này với viền màu trắng bao quanh bởi trú đen và đã góc cạnh chia giữa chúng:

này là gần nhất tôi đã đến để đạt được điều này, tuy nhiên bạn sẽ thấy rằng tôi đang thiếu đường viền đen bên trong. Tôi cũng không chắc chắn làm thế nào để vẽ các đường viền màu đen chính trên đầu và dưới và cho phép phá vỡ trong đó cho màu trắng giao nhau. (Hãy chạy đoạn mã trong chế độ toàn màn hình):

.container { 
 
    width: 1020px; 
 
} 
 

 
.clear{clear:both; font-size:0px;line-height:0px; display:block;} 
 

 
.categorycta { 
 
\t border-top: 2px solid #000; 
 
\t border-bottom: 2px solid #000; 
 
\t background-color: #ffffff; 
 
} 
 

 
.bandtop { 
 
\t content: ''; 
 
\t height: 10px; 
 
\t background-color: #ffffff; 
 
\t display: block; 
 
\t border-top: 2px solid #000; 
 
} 
 

 
.bandbot { 
 
\t content: ''; 
 
\t height: 10px; 
 
\t background-color: #ffffff; 
 
\t display: block; 
 
\t border-bottom: 2px solid #000; 
 
} 
 

 
.categorycta .col { 
 
\t position: relative; 
 
\t height: 216px; 
 
    width: 340px; 
 
\t float: left; 
 
\t background-size: cover; 
 
} 
 

 
.categorycta .col.left:after { 
 
\t content: ''; 
 
    line-height: 0; 
 
    font-size: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 20px solid transparent; 
 
    border-top: 216px solid #fff; 
 
    border-left: 10px solid transparent; 
 
    border-right: 0 solid #fff; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
} 
 

 
.categorycta .col.mid:before { 
 
\t content: ''; 
 
    line-height: 0; 
 
    font-size: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 216px solid #fff; 
 
    border-top: 20px solid transparent; 
 
    border-left: 0px solid transparent; 
 
    border-right: 10px solid transparent; 
 
    position: absolute; 
 
    top: -20px; 
 
    left: 0; 
 
} 
 

 
.categorycta .col.mid:after { 
 
    content: ''; 
 
    line-height: 0; 
 
    font-size: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 20px solid transparent; 
 
    border-bottom: 216px solid #fff; 
 
    border-left: 10px solid transparent; 
 
    border-right: 0 solid #fff; 
 
    position: absolute; 
 
    top: -20px; 
 
    right: 0; 
 
} 
 

 
.categorycta .col.right:before { 
 
    content: ''; 
 
    line-height: 0; 
 
    font-size: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 216px solid #fff; 
 
    border-bottom: 20px solid transparent; 
 
    border-left: 0px solid transparent; 
 
    border-right: 10px solid transparent; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<div class="container"> 
 
<div class="bandtop"></div> 
 
<div class="categorycta"> 
 
    <div class="col left" style="background-image: url('http://lorempixel.com/340/220/');"> 
 

 
    </div> 
 
    <div class="col mid" style="background-image: url('http://lorempixel.com/340/222/"> 
 
    </div> 
 
    <div class="col right" style="background-image: url('http://lorempixel.com/340/225/"> 
 
    </div> 
 
    <div class="clear"></div> 
 
</div> 
 
<div class="bandbot"></div> 
 
</div>

Answer 1

Bạn cần phải loại bỏ các biên giới hiện có, thay vào đó bạn có thể sử dụng transform: skewX(2deg); và thêm viền đen xung quanh nó, sử dụng margin-top để che đậy đường viền trên cùng và dưới cùng.

Ví dụ:

.container { 
 
    width: 1020px; 
 
} 
 

 
.clear{clear:both; font-size:0px;line-height:0px; display:block;} 
 

 
.categorycta { 
 
\t border-top: 2px solid #000; 
 
\t border-bottom: 2px solid #000; 
 
\t background-color: #ffffff; 
 
} 
 

 
.bandtop { 
 
\t content: ''; 
 
\t height: 10px; 
 
\t background-color: #ffffff; 
 
\t display: block; 
 
\t border-top: 2px solid #000; 
 
} 
 

 
.bandbot { 
 
\t content: ''; 
 
\t height: 10px; 
 
\t background-color: #ffffff; 
 
\t display: block; 
 
\t border-bottom: 2px solid #000; 
 
} 
 

 
.categorycta .col { 
 
\t position: relative; 
 
\t height: 216px; 
 
    width: 340px; 
 
\t float: left; 
 
\t background-size: cover; 
 
} 
 

 
.categorycta .col.left:after { 
 
\t content: ''; 
 
    line-height: 0; 
 
    font-size: 0; 
 
    width: 10px; 
 
    height: 102%; 
 
    /* border-bottom: 20px solid transparent; */ 
 
    /* border-top: 216px solid #fff; */ 
 
    /* border-left: 10px solid transparent; */ 
 
    /* border-right: 0 solid #fff; */ 
 
    background: white; 
 
    transform: skewX(2deg); 
 
    border-left: 2px solid black; 
 
    border-right: 2px solid black; 
 
    margin-top: -2px; 
 
    z-index: 1; 
 
    position: absolute; 
 
    top: 0; 
 
    right: -10px; 
 
} 
 

 
.categorycta .col.mid:before { 
 
\t content: ''; 
 
    line-height: 0; 
 
    font-size: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-bottom: 216px solid #fff; 
 
    border-top: 20px solid transparent; 
 
    border-left: 0px solid transparent; 
 
    border-right: 10px solid transparent; 
 
    position: absolute; 
 
    top: -20px; 
 
    left: 0; 
 
} 
 

 
.categorycta .col.mid:after { 
 
    content: ''; 
 
    line-height: 0; 
 
    font-size: 0; 
 
    width: 10px; 
 
    height: 102%; 
 
    position: absolute; 
 
    top: 0; 
 
    right: -9px; 
 
    background: white; 
 
    transform: skewX(-3deg); 
 
    border-left: 2px solid black; 
 
    border-right: 2px solid black; 
 
    margin-top: -2px; 
 
    z-index: 1; 
 
} 
 

 
.categorycta .col.right:before { 
 
    content: ''; 
 
    line-height: 0; 
 
    font-size: 0; 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 216px solid #fff; 
 
    border-bottom: 20px solid transparent; 
 
    border-left: 0px solid transparent; 
 
    border-right: 10px solid transparent; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
}

<div class="container"> 
 
<div class="bandtop"></div> 
 
<div class="categorycta"> 
 
    <div class="col left" style="background-image: url('http://lorempixel.com/340/220/');"> 
 

 
    </div> 
 
    <div class="col mid" style="background-image: url('http://lorempixel.com/340/222/"> 
 
    </div> 
 
    <div class="col right" style="background-image: url('http://lorempixel.com/340/225/"> 
 
    </div> 
 
    <div class="clear"></div> 
 
</div> 
 
<div class="bandbot"></div> 
 
</div>

Answer 2

Làm thế nào về một cái gì đó như thế này? Nó có thể không phải là giải pháp tidiest nhưng nó trông gần như giống như trong hình ảnh của bạn. Bạn có thể điều chỉnh một số giá trị theo ý thích của mình, tôi chủ yếu sử dụng đường dẫn clip. Một nền đen và hình ảnh trên nó có kích thước nhỏ hơn một chút.

.container { 
 
    width: 1020px; 
 
} 
 

 
.categorycta { 
 
\t border-top: 2px solid #000; 
 
\t border-bottom: 2px solid #000; 
 
    padding: 10px 0; 
 
\t background-color: #ffffff; 
 
    height: 220px; 
 
} 
 

 
.comic-panel { 
 
    background-color: #000; 
 
    height: 222px; 
 
    position: absolute; 
 
} 
 

 
.comic-left { 
 
    -webkit-clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%); 
 
    clip-path: polygon(0 0, 90% 0%, 100% 100%, 0% 100%); 
 
} 
 

 
.comic-left > img { 
 
    -webkit-clip-path: polygon(1% 1%, 89% 1%, 99% 99%, 1% 99%); 
 
    clip-path: polygon(1% 1%, 89% 1%, 99% 99%, 1% 99%); 
 
} 
 

 
.comic-middle { 
 
    left: 340px; 
 
    -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); 
 
    clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%); 
 
} 
 

 
.comic-middle > img { 
 
    -webkit-clip-path: polygon(1% 1%, 99% 1%, 89% 99%, 11% 99%); 
 
    clip-path: polygon(1% 1%, 99% 1%, 89% 99%, 11% 99%); 
 
} 
 

 
.comic-right { 
 
    left: 680px; 
 
    -webkit-clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%); 
 
    clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%); 
 
} 
 

 
.comic-right > img { 
 
    -webkit-clip-path: polygon(9% 1%, 99% 1%, 99% 99%, 11% 99%); 
 
    clip-path: polygon(9% 1%, 99% 1%, 99% 99%, 11% 99%); 
 
}

<div class="container"> 
 
<div class="categorycta"> 
 
    <div class="comic-panel comic-left"> 
 
     <img src="http://lorempixel.com/340/220/"> 
 
    </div> 
 
    <div class="comic-panel comic-middle"> 
 
     <img src="http://lorempixel.com/340/222/"> 
 
    </div> 
 
    <div class="comic-panel comic-right"> 
 
     <img src="http://lorempixel.com/340/225/"> 
 
    </div> 
 
</div> 
 
</div>

Answer 3

Bạn có thể làm điều này bằng cách sử dụng các clip-đường tài sản.

Trước hết bạn xóa tất cả đường viền khỏi hình ảnh bên trong, sau đó bạn hiển thị chúng dưới dạng khối nội tuyến (và đặt kích thước phông chữ thành phần gốc thành 0 để tránh các vấn đề hiển thị).

Sau đó, bạn tạo đường dẫn clip cho từng loại lát khác nhau mà bạn sẽ cần. Ví dụ:

.left{ 
    -webkit-clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%); 
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%); 
} 

Thay vì có hình ảnh làm nền, bạn sử dụng thẻ img. Kích thước của hình ảnh bằng với kích thước của vùng chứa trừ đường viền (ví dụ: nếu vùng chứa của bạn là 200 x 175px và bạn muốn đường viền của mình rộng 5px, bạn đặt hình ảnh là 190 x 165px). Cuối cùng, bạn áp dụng cùng một đường dẫn clip cho chính hình ảnh đó.

Tóm lại, bạn không thực sự sử dụng đường viền. Bạn mô phỏng chúng bằng cách tạo một hình ảnh nhỏ hơn một chút so với vùng chứa và định tâm nó.

.col img { 
    position: absolute; 
    left:5px; /* Desired thickness of your border */ 
    top: 5px; /* Desired thickness of your border */ 
    width: 190px; /* Width of the container minus the thickness of the border multiplied by two*/ 
    height: 165px; /* Heightof the container minus the thickness of the border multiplied by two*/ 
} 

.left img { 
    -webkit-clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%); 
    clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%); 
} 

Dưới đây là một Jsfiddle (Tôi đã từng giáp đỏ cho tầm nhìn và bao gồm năm hình ảnh chứ không phải ba để hiển thị tất cả các loại có thể có của gạch bạn có thể cần phải sử dụng):

https://jsfiddle.net/rsjc1pL4/