如何實現與邊界有裝飾角的相鄰div的雙邊框

Question

我試圖用「漫畫書」類創建三個單獨的容器。我想最後的結果看起來像由黑色包圍寄宿生白色邊框這個形象，並在它們之間傾斜隔離壁：

這是我來實現這一目標最接近的，但是你會看到我錯過了內在的黑色邊框。我也不確定如何在頂部和底部繪製主要的黑色邊框，並允許它們在白色中相交。 （請運行在全屏模式下的片段）：

.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

您需要刪除現有邊界，而是可以使用transform: skewX(2deg);，並添加周圍的黑色邊框，使用margin-top掩蓋頂部和底部邊框。

例子：

.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

怎麼這樣呢？它可能不是最整潔的解決方案，但它看起來幾乎與你的照片相同。 您可以根據自己的喜好調整某些值，我主要使用剪輯路徑。一個黑色的背景和一個小一點的圖像。

.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

您可以通過使用夾路徑屬性做到這一點。

首先，您從內部圖像中刪除所有邊框，然後將它們顯示爲內嵌塊（並將父元素字體大小設置爲0以避免顯示問題）。

然後，爲您需要的每種不同類型的貼圖創建一個剪輯路徑。例如：

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

您不使用圖像作爲背景，而是使用img標籤。圖像的大小等於容器的大小減去邊框（例如，如果您的容器是200 x 175像素，並且希望邊框寬度爲5像素，則將圖像設置爲190 x 165像素）。最後，將相同的剪輯路徑應用於圖像本身。

總之，你並沒有真正使用邊界。您可以通過創建一個比容器稍微小一點的圖像並對其進行居中來模擬它們。

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

這裏有一個的jsfiddle（我用紅色邊框的知名度和包括五幅圖像，而不是三個，以顯示所有你可能需要使用可能的類型磚）：

https://jsfiddle.net/rsjc1pL4/