make an image border look like a folder that includes other images

Hi I'm trying to make a site of images from our family holidays and it has a page with folders that has one image from every day that I can click on each image and be take to a different page with all the images from that day.

Everything looks good but I want to add a border to each image on the folders page, and I want the border should look like a folder, with the top right side should be a bit higher than the left side etc.

I tried playing around with some tooltip css styles that has like an arrow coming out from it, but it didn't work.

Hope this question is clear enough, it is the best I can describe my problem.

<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <a href="images.html"><img src="image1200.jpg" class="img-fluid img" alt=""></a>
            <a href="images.html"><img src="image1200.jpg" class="img-fluid img" alt=""></a>
            <a href="images.html"><img src="image1200.jpg" class="img-fluid img" alt=""></a>
            <a href="images.html"><img src="image1200.jpg" class="img-fluid img" alt=""></a>
        </div>
        <div class="col-lg-3">
            <a href="images.html"><img src="image1200.jpg" class="img-fluid img" alt=""></a>
            <a href="images.html"><img src="image1200.jpg" class="img-fluid img" alt=""></a>
            <a href="images.html"><img src="image1200.jpg" class="img-fluid img" alt=""></a>
            <a href="images.html"><img src="image1200.jpg" class="img-fluid img" alt=""></a>
        </div>
        <div class="col-lg-3">
            <a href="images.html"><img src="image1200.jpg" class="img-fluid img" alt=""></a>
            <a href="images.html"><img src="image1200.jpg" class="img-fluid img" alt=""></a>
            <a href="images.html"><img src="image1200.jpg" class="img-fluid img" alt=""></a>
            <a href="images.html"><img src="image1200.jpg" class="img-fluid img" alt=""></a>
        </div>
        <div class="col-lg-3">
            <a href="images.html"><img src="image1200.jpg" class="img-fluid img" alt=""></a>
            <a href="images.html"><img src="image1200.jpg" class="img-fluid img" alt=""></a>
            <a href="images.html"><img src="image1200.jpg" class="img-fluid img" alt=""></a>
            <a href="images.html"><img src="image1200.jpg" class="img-fluid img" alt=""></a>
        </div>
    </div>
</div>

and the css

.img {
    border: black 5px solid;
    position: relative;
    margin: 5px;
}

.img:hover {
    cursor: pointer;
    opacity: .8;
    box-shadow: 0 0 5px 3px rgba(0, 140, 186, 0.5);
}

.img::before {
    content: " ";
    position: absolute;
    bottom: 100%;
    left: 0;
    margin-right: -5px;
    border-width: 10px;
    border-style: solid;
    border-color: black transparent black transparent;
}

Solution

Thanks for your nice Question. Please, try the below code. I fix this via some CSS code. I hope it will be work which is you find.

.container {
  display: flex;
}

.folder {
  width: 150px;
  height: 105px;
  margin: 0 auto;
  margin-top: 50px;
  position: relative;
  background-color: #708090;
  border-radius: 0 6px 6px 6px;
  box-shadow: 4px 4px 7px rgba(0, 0, 0, 0.59);
}

.folder:before {
  content: '';
  width: 50%;
  height: 12px;
  border-radius: 0 20px 0 0;
  background-color: #708090;
  position: absolute;
  top: -12px;
  left: 0px;
}

<!DOCTYPE html>
<html>

<head>
  <title>Folder via HTML & CSS By Monzur Alam</title>
</head>

<body>

  <div class="container">
    <div class="folder">
      <a href=""><img src="https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e" /></a>
    </div>
    <div class="folder">
      <img src="https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e" />
    </div>
    <div class="folder">
      <img src="https://cdn.sstatic.net/Img/teams/teams-illo-free-sidebar-promo.svg?v=47faa659a05e" />
    </div>
  </div>

</body>

</html>