html – 圆角边六边形的图像

概述我正在尝试在圆角的六角形内部创建一个图像,其中该图像将充当较长六边形的标题以显示轮廓/传记信息.六边形也有边框. 我已经研究过,虽然我能找到如何将图像放在六边形中的方法,以及如何制作像它一样的圆形角形六边形(这是我想要的形状除了旋转)http://codepen.io/thebabydino/details/gFxzt我似乎无法将这两个概念合并在一起,可能是因为它们不同. 请有人帮助我. 这就是我 我正在尝试在圆角的六角形内部创建一个图像,其中该图像将充当较长六边形的标题以显示轮廓/传记信息.六边形也有边框.

我已经研究过,虽然我能找到如何将图像放在六边形中的方法,以及如何制作像它一样的圆形角形六边形(这是我想要的形状除了旋转)http://codepen.io/thebabydino/details/gFxzt我似乎无法将这两个概念合并在一起,可能是因为它们不同.

请有人帮助我.

这就是我到目前为止所提出的并不是我想要的.

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

这是my jsfiddle.

响应能力的奖励积分.

解决方法 如果您的图像具有固定的背景颜色,您可以使用此笔,它是thebydino六边形的叉子：

http://codepen.io/rafaelcastrocouto/pen/mAPjRP

如果不是,您可以使用SVG路径

http://codepen.io/rafaelcastrocouto/pen/vXGamL

.clip-polygon {  -webkit-clip-path: url("#hex");  clip-path: url("#hex");}

<div >  <img src="https://placeholdit.imgix.net/~text?txtsize=30&bg=ff6347&txtclr=ffffff&txt=Image&w=140&h=140" alt="demo-clip-path" wIDth="140" height="140" ></div><svg height="0" wIDth="0">  <defs>    <clipPath ID="hex">      <path d="M59 2.8867513459481a10 10 0 0 1 10 0l45.425625842204 26.226497308104a10 10 0 0 1 5 8.6602540378444l0 52.452994616207a10 10 0 0 1 -5 8.6602540378444l-45.425625842204 26.226497308104a10 10 0 0 1 -10 0l-45.425625842204 -26.226497308104a10 10 0 0 1 -5 -8.6602540378444l0 -52.452994616207a10 10 0 0 1 5 -8.6602540378444"></path>    </clipPath>  </defs></svg>

总结

以上是内存溢出为你收集整理的html – 圆角边六边形的图像全部内容，希望文章能够帮你解决html – 圆角边六边形的图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。