嗨，我想做一个网站的图片从我们的家庭假期，它有一个页面的文件夹，每天有一个图像，我可以点击每个图像，并采取不同的页面从当天所有的图像。
一切看起来都很好，但我想给文件夹页面上的每个图像添加边框，我想让边框看起来像一个文件夹，右上角应该比左边高一点等等。
我尝试了一些工具提示css样式，像一个箭头从它出来，但它没有工作。
希望这个问题足够清楚，这是我能描述我的问题的最好方式。
<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>
和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;
}
谢谢你的问题。请尝试下面的代码。我通过一些CSS代码修复了这个问题。我希望这将是你找到的工作。
.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>