css照片墙心形

今天我想和大家分享一下如何使用CSS创建一个照片墙，而且这个照片墙还是一个心形的！

首先，我们需要一个HTML文件，里面包含多张照片，可以使用img标签来插入。

<div class="photo-wall">
  
   
   <img src="photo1.jpg">
  
   
   <img src="photo2.jpg">
  
   
   <img src="photo3.jpg">
  
   
   <img src="photo4.jpg">
  
   
   <img src="photo5.jpg">
  
   
   <img src="photo6.jpg">
  
   
   <img src="photo7.jpg">
  
   
   <img src="photo8.jpg">
  
   
   <img src="photo9.jpg">
  
   
   <img src="photo10.jpg">
  
  </div> 

接下来，我们需要使用CSS来对这些照片进行布局。我们使用网格布局，将10张照片分成了5行2列的格子。

.photo-wall{
  
   
   display: grid;
  
   
   grid-template-columns: repeat(2, 1fr);
  
   
   grid-template-rows: repeat(5, 1fr);
  
   
   gap: 10px;
  
}
  
  .photo-wall img{
  
   
   width: 100%;
  
   
   height: 100%;
  
   
   object-fit: cover;
  
}
 

然后，我们需要将这些照片组合成一个心形。我们可以使用CSS的伪元素来实现。通过定位和旋转，将其中的几张照片旋转180度，就形成了一个比较像心形的照片墙。

.photo-wall::before{
  
   
   content: "";
  
   
   position: absolute;
  
   
   top: 0;
  
   
   left: 50%;
  
   
   width: 0;
  
   
   height: 0;
  
   
   border-top: 50px solid #f1c1c1;
  
   
   border-bottom: 50px solid transparent;
  
   
   border-left: 50px solid transparent;
  
   
   border-right: 50px solid transparent;
  
   
   transform: translateX(-50%);
  
}
  
  .photo-wall::after{
  
   
   content: "";
  
   
   position: absolute;
  
   
   bottom: 0;
  
   
   left: 50%;
  
   
   width: 0;
  
   
   height: 0;
  
   
   border-top: 50px solid #f1c1c1;
  
   
   border-bottom: 50px solid transparent;
  
   
   border-left: 50px solid transparent;
  
   
   border-right: 50px solid transparent;
  
   
   transform: translateX(-50%) rotate(180deg);
  
}
 

最后，我们的照片墙心形就完成了！

以上就是使用CSS创建照片墙心形的方法。希望这个文章可以对你有所启发，让你在布局设计方面有更多的灵感。