One challenge I'm facing is with a code that involves 6 slanted divs. I would like to add a black border to only the center Title 2 div. However, when I apply the border, it only shows on the top and bottom, not on the left and right sides.
.title {
background: #f2f2f2;
}
.img {
min-height: 300px;
background: center/cover no-repeat;
}
.col:first-child {
clip-path: polygon(0 0, calc(100% - 15px) 0, calc(100% - 10vw) 100%, 0 100%);
margin-right: -5vw;
}
.col:nth-child(2) {
clip-path: polygon(10vw 0, calc(100% - 15px) 0, calc(100% - 10vw) 100%, 15px 100%);
margin: 0 -5vw;
}
.col:last-child {
clip-path: polygon(10vw 0, 100% 0, 100% 100%, 15px 100%);
margin-left: -5vw;
}
.col:nth-child(2)>.title,
.col:last-child>.title {
padding-left: calc(10vw - 15px)!important;
}
.black-border{
border: 2px solid black;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<div class="container-fluid">
<div class="row text-center">
<div class="col">
<div class="title p-3">Title 1</div>
<div class="img mt-3" style="background-image:url(https://picsum.photos/id/1012/800/800)"></div>
</div>
<div class="col">
<div class="title p-3 black-border">Title 2</div>
<div class="img mt-3" style="background-image:url(https://picsum.photos/id/1015/800/800)"></div>
</div>
<div class="col">
<div class="title p-3">Title 3</div>
<div class="img mt-3" style="background-image:url(https://picsum.photos/id/1016/800/800)"></div>
</div>
</div>
</div>