css3 六边形瀑布流 |css3文字超出2行省略

.hexagon{
position: relative;
width: 33.33%;
margin: 0 auto;
padding-bottom: 38.29%;
overflow: hidden;
float: left;
}
.hexagon:before {
content: "";
position: absolute;
z-index: -1;
top: 0; 
right: 0;
bottom: 0; 
left: 0;
background-color: #fff;
transform: rotate(60deg);
transform-origin: bottom left;
}
.hexagon:after {
content: "";
position: absolute;
z-index: -1;
top: 0; 
right: 0;
bottom: 0; 
left: 0;
background-color: #fff;
transform: rotate(-60deg);
transform-origin: bottom right;
}
.img-wrapper{
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
.img-wrapper img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

如上代码所示，在 HTML 中大家需要创建一个容器元素，然后利用 CSS3 的伪元素创建六边形框，以及内部的图片容器和图片元素。利用 flexbox 可以很方便地进行排列和布局。

为了实现瀑布流布局的效果，大家可以将不同大小的六边形容器推入同一个 flexbox 容器，从而实现图片随机排列的效果。这样的布局不仅美观，而且响应式，适用于不同的设备和屏幕大小。

总体来说，利用 CSS3 制作六边形瀑布流布局是一种很有趣和实用的技术，可以让你的网站更加吸引人和生动。如果你还没有尝试过，不妨挑战一下，或许你会有意想不到的表现和收获。