html+六边形的图片框,带有图像的html / css六角形

实现带有图像的六边形的最灵活的方法是使用嵌入式SVG：

svg{

width:30%;

}

至少有两种方法可以使用SVG实现六边形图像：制作一个六边形多边形，并用图像和pattern元素填充该多边形(我在上一片段中使用的方法)

使用六边形多边形裁剪图像(请参见下一个片段)

svg{width:30%}

SVG方法允许控制六边形形状和图像的许多方面。并且可以使用CSS设置样式。这是一个例子：

svg{

width:30%;

margin:0 auto;

}

#hex{

stroke-width:2;

stroke: teal;

fill-opacity:0.6;

transition:fill-opacity .8s;

}

#hex:hover{

fill-opacity:1;

}

#text{

stroke-width:0.5;

stroke:teal;

fill-opacity:0.4;

fill:teal;

transition:fill-opacity .8s;

}

#hex:hover + #text{

fill-opacity:1;

}

Some text