我正在尝试在圆 Angular 六边形内创建一个图像,其中该图像将充当较长六边形的标题以显示个人资料/传记信息。六边形也有边界。
我已经研究过,虽然我能够找到关于如何将图像放入六边形以及如何制作圆 Angular 六边形的操作方法,就像它在此处可用(这是我想要的形状,除了它是旋转)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%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
这是 my jsfiddle .
响应能力的加分。
最佳答案
如果您的图片有固定的背景颜色,您可以使用这支笔,它是恐龙宝宝六边形的 fork :
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 class="clip-wrap">
<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" class="clip-polygon">
</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 - 圆 Angular 六边形中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39509647/