CODEWITHSUNDEEP
htmlcssbootstrap-4
Shaikh Kamran Ahmed
Shaikh Kamran Ahmed

Reputation: 360

slanted div with border

I have this code where there are 6 slanted divs. What i want to do is give black border to the center title 2 div only but when i give border to this it only shows for top and bottom. left and right border is not visible.

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

Upvotes: 0

Views: 130

Answers (1)

Temani Afif
Temani Afif

Reputation: 272842

Use drop-shadow filter to add border around your elements:

.title {
  background: #f2f2f2;
}
.filter {
  --b:2px;
  filter:
   drop-shadow(var(--b) 0px 0px black) 
   drop-shadow(0px var(--b) 0px black) 
   drop-shadow(calc(-1*var(--b)) 0px 0px black) 
   drop-shadow(0px calc(-1*var(--b)) 0px black)
}
.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;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

<div class="container-fluid mt-2">
  <div class="row text-center filter">
    <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>

Upvotes: 1

Related Questions