基于CSS怎样实现六边形图片 思路和方法是什么

在日常操作或是项目的实际应用中，有不少朋友对于“基于CSS怎样实现六边形图片，思路和方法是什么”的问题会存在疑惑，下面小编给大家整理和分享了相关知识和资料，易于大家学习和理解，有需要的朋友可以借鉴参考，下面我们一起来了解一下吧。

这个效果的难点在于六边形的绘制, 那么接下来我们就一起来看下作者是怎么实现他的吧

实现思路

使用grid进行布局, 水平、垂直居中显示

使用clip-path: polygon() 来绘制图片六边形

使用transform: translate()定位六边形的位置

使用filter: grayscale(80%)对图片进行滤镜, 将图片转为灰度图像

鼠标浮动缩放效果

都是我们平时开发中不常用到的CSS3属性, 那么我们先来简单的介绍下吧

1、网格布局grid

兼容性查看

要使 HTML 元素变成一个网格容器，可以将 display 属性设置为 grid 或 inline-grid。

网格容器内放置着由列和行内组成的网格元素。

属性:

1、grid-template-columns

定义了网格布局中的列的数量，它也可以设置每个列的宽度。

2、grid-template-rows

定义了网格布局中的行的数量，它也可以设置每一行的高度。

3、grid-areas

指定网格元素在网格布局中的大小和位置, 是以下属性的简写属性: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

4、justify-content

属性用于对齐容器内的网格，设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

5、align-content

属性用于设置垂直方向上的网格元素在容器中的对齐方式。

6、place-content

属性指定网格元素水平、垂直方向元素分布方式

2、var() 函数

兼容性查看

定义: var() 函数用于插入自定义的属性值，如果一个属性值在多处被使用，该方法就很有用。

语法: var(custom-property-name, value)

实例:

:root {

--main-bg-color: coral;

}

#div1 {

background-color: var(--main-bg-color);

}

3、clip-path

兼容性查看

使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。可以指定一些特定形状。

polygon( , , …, ) 定义了每一个点的坐标，起点是从左上角开始计算的，可以用百分百，也可以用px等单位。

代码实现

HTML

<div class="gallery-container">

<div class="gallery">

<img

src="https://picsum.photos/id/1040/300/300"

alt="a house on a mountain"

/>

<img src="https://picsum.photos/id/106/300/300" alt="sime pink flowers" />

<img

src="https://picsum.photos/id/136/300/300"

alt="big rocks with some trees"

/>

<img

src="https://picsum.photos/id/1039/300/300"

alt="a waterfall, a lot of tree and a great view from the sky"

/>

<img src="https://picsum.photos/id/110/300/300" alt="a cool landscape" />

<img

src="https://picsum.photos/id/1047/300/300"

alt="inside a town between two big buildings"

/>

<img

src="https://picsum.photos/id/1057/300/300"

alt="a great view of the sea above the mountain"

/>

</div>

</div>

CSS

.gallery-container {

min-height: 100vh;

display: grid;

place-content: center; /* 水平垂直方向居中 */

background: #aabbfb;

}

.gallery {

--s: 150px; /* control the size */

--g: 10px; /* control the gap */

display: grid;

}

.gallery > img {

grid-area: 1/1; /* 规定从第一行第一列开始显示项目 */

width: var(--s);

aspect-ratio: 1.15; /* 宽高比例缩放 */

object-fit: cover; /* 保持图片原有比例, 会有剪切*/

clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0 50%);

transform: translate(var(--_x, 0), var(--_y, 0)) scale(var(--_t, 1)); /* 对图片进行移动和缩放 */

cursor: pointer;

filter: grayscale(80%); /* 灰度滤镜 */

transition: 0.2s linear; /* 过渡效果 */

}

.gallery > img:hover {

filter: grayscale(0);

z-index: 1;

--_t: 1.2;

}

.gallery > img:nth-child(1) {

--_y: calc(-100% - var(--g));

}

.gallery > img:nth-child(7) {

--_y: calc(100% + var(--g));

}

.gallery > img:nth-child(3),

.gallery > img:nth-child(5) {

--_x: calc(-75% - 0.87 * var(--g));

}

.gallery > img:nth-child(4),

.gallery > img:nth-child(6) {

--_x: calc(75% + 0.87 * var(--g));

}

.gallery > img:nth-child(3),

.gallery > img:nth-child(4) {

--_y: calc(-50% - 0.5 * var(--g));

}

.gallery > img:nth-child(5),

.gallery > img:nth-child(6) {

--_y: calc(50% + 0.5 * var(--g));

}

“基于CSS怎样实现六边形图片，思路和方法是什么”的内容就介绍到这里了，感谢大家的阅读。

（编辑：银川站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!