如何为头像图像创建五边形？

Question

我无法弄清楚如何为用户头像图像(或.svg)创建五边形形状.

寻找不是顶部的形状.

我在http://css-tricks.com/examples/ShapesOfCSS/找到了示例,但不知道如何以这种形状填充图像.背景属性也不会起作用,卡在这里.

五角大楼的例子

Answer 1

没有任何CSS的最简单解决方案就是使用svg（最大的浏览器支持）。

<svg width="100" height="100" viewBox="-1 0 101 100">
  <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" stroke="black" fill="coral" />
</svg>

您可以定义内联svg clipPath并svg在上应用裁剪image。这比CSS具有更好的浏览器支持clip-path。

<svg width="100" height="100" viewBox="0 0 100 100">
  <defs>
    <clipPath id="shape">
      <path d="M20,0 L80,0 L100,60 L50,100 L0,60z" />
    </clipPath>
  </defs>
  <image clip-path="url(#shape)" xlink:href="https://www.lorempixel.com/100/100" x="0" y="0" height="100px" width="100px" />
</svg>

Answer 2

您可以使用剪辑路径

CSS-Tricks链接

div {
  width: 280px;
  height: 280px;
  background-image: url(http://placekitten.com/g/200/300);
  background-size: 100%;
  -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
/* Center the demo */

html,
body {
  height: 100%;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div></div>