如何为头像图像创建五边形？ [英] How to create pentagon shape for avatar image?

问题描述

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

I can't figure out how to create pentagon shape for user avatar image (or .svg).

寻找不是顶部的形状。

我在这里找到了一些例子 http：// css- tricks.com/examples/ShapesOfCSS/ 但不知道如何以这样的形状填充图像
。背景属性也不起作用，卡在这里。

I have found examples here http://css-tricks.com/examples/ShapesOfCSS/ but don't know how to fill image in such shape. Background propertie also won't work, stuck here.

五角大楼的例子

推荐答案

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

Easiest solution without any CSS, would be using svg(maximum browser support).

<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 剪裁。这比CSS clip-path 更好的浏览器支持。

You can define inline svg clipPath and apply svg clipping on an image. This has way better browser support than 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>

这篇关于如何为头像图像创建五边形？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！