Css 如何为头像图像创建五角大楼形状？

我不知道如何为用户头像图像（或.svg）创建五角大楼形状

寻找向下而不是顶部的形状

我在这里找到了一些例子，但不知道如何使用 用这样的形状填充图像。背景属性也不起作用，卡在这里

---

没有任何CSS的最简单解决方案是使用

svg

（最大浏览器支持）

---

您可以使用剪辑路径

div{
宽度：280px；
高度：280px；
背景图片：url(http://placekitten.com/g/200/300);
背景大小：100%；
-webkit剪辑路径：多边形（50%0%、100%38%、82%100%、18%100%、0%38%）；
剪辑路径：多边形（50%0%，100%38%，82%100%，18%100%，0%38%）；
}
/*演示中心*/
html，
身体{
身高：100%；
}
身体{
显示器：flex；
证明内容：中心；
对齐项目：居中；
}

---

你在找这样的东西吗

五角大楼{ 位置：相对位置； 宽度：54px； 边框宽度：0 18px 50px； 边框样式：实心； 边框颜色：红色透明； } #五角大楼：以前{ 内容：“； 位置：绝对位置； 身高：0； 宽度：0； 顶部：50px； 左-18px； 边框样式：实心； 边框宽度：45px 45px 0 45px； 边框颜色：红色透明； } .标志赞助商{ z指数：1000； 位置：绝对位置； 顶部：20px； 左：10px； 宽度：36px； 高度：自动； 保证金：0自动； 显示：块； }

您可以应用CSS转换（

转换：旋转（180度）；

）并从CSS技巧中旋转六边形。SVG答案可能就是解决方法。如果您需要旧的浏览器支持，可能唯一的方法是在普通图像上放置png遮罩。PNG将匹配你所使用的任何背景，中间有一个五角大厦形状的洞，你可以看到化身通过。只是提供选择。我也喜欢SVG。我不是在和你争论。SVG在我看来也更好…只是陈述选择而已。抱歉，如果这是冒犯性的。不是故意的。我只是说CSS

clip path

的浏览器支持很糟糕。同意……目前支持很差，但它即将到来。这个-

多边形（50%0%，100%38.2%，80.9%100%，19.1%100%，0%38.2%）

将是尽可能精确的坐标，以创建一个规则的五角大楼（可能用于3D变换）。在所有情况下，第二个半刻度均为零。如果我的计算是正确的（看起来是正确的），那么一些数字是19%和81%，而不是18%和82%，但这是对当前问题的挑剔。谢谢，我还不知道svg。但是如何以.png或.jpg格式插入图像？@user2791999-查看编辑。很抱歉我误解了你的问题。