我不知道如何为用户头像图像（或 .svg）创建五边形形状。
寻找指向下方而不是指向上方的形状。
我在这里找到了例子http://css-tricks.com/examples/ShapesOfCSS/ http://css-tricks.com/examples/ShapesOfCSS/但不知道怎么做
将图像填充为这样的形状。后台属性也不起作用，卡在这里。
五角大楼的例子 https://i.stack.imgur.com/81qkB.jpg
没有任何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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
