jak uzyskać podwójne obramowanie z sąsiadującymi elementami div, które mają ukośne dekoracje brzegowe

Question

Próbuję utworzyć trzy osobne pojemniki z wyczuciem "komiksu". Chciałbym, aby efekt końcowy wygląda tak obraz z białym obramowaniem otoczonych czarnymi granicami i nie nachylone przegrody między nimi:

Jest to najbliżej Doszedłem do osiągnięcia tego celu, jednak widać że brakuje mi wewnętrznych czarnych granic. Nie jestem również pewien, jak narysować główne czarne krawędzie na górze i na dole i pozwolić na przerwy w nich, aby biały się przecinał. (Należy uruchomić fragment w trybie pełnoekranowym):

.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

trzeba usunąć istniejące granice, zamiast tego można użyć transform: skewX(2deg); i dodać czarne obramowanie wokół niego, użyj margin-top zatuszować górna i dolna krawędź.

Przykład:

.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

Jak o czymś takim? To może nie być najmodniejsze rozwiązanie, ale wygląda prawie tak samo jak na twoim zdjęciu. Możesz dostosować niektóre wartości do swoich upodobań, głównie użyłem ścieżki klipu. Czarne tło i obraz nad nim w nieco mniejszym rozmiarze.

.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

Można to zrobić za pomocą clip-path nieruchomości.

Najpierw usuwasz wszystkie obramowania z wewnętrznych obrazów, następnie wyświetlasz je jako blok inline (i ustawiasz rozmiar czcionki elementu nadrzędnego na 0, aby uniknąć problemów z wyświetlaniem).

Następnie utworzysz ścieżkę klipu dla każdego z różnych rodzajów płytek, które będziesz potrzebować. Na przykład:

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

Zamiast posiadania obrazu jako tła, należy użyć znacznika img. Rozmiar obrazu jest równy rozmiarowi kontenera bez obramowania (na przykład, jeśli twój pojemnik ma wymiary 200 x 175 pikseli i jeśli chcesz, aby szerokość obramowania wynosiła 5 pikseli, ustaw obraz jako 190 x 165 pikseli). Na koniec stosujesz tę samą ścieżkę do klipu do samego obrazu.

Krótko mówiąc, tak naprawdę nie używasz granic. Symulujesz je, tworząc obraz, który jest nieco mniejszy niż kontener i wyśrodkowuje go.

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

Oto Jsfiddle (użyłem czerwone granice widoczności i obejmowały pięć obrazów, a nie trzy, aby pokazać wszystkie możliwe rodzaje płytek może musisz używać):

https://jsfiddle.net/rsjc1pL4/