Question

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

寻找不是顶部的形状。

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

Pentagon example

Answer 1

您可以使用剪辑路径

CSS-Tricks Link

＆＃13;

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;
}

＆＃13;

<div></div>

＆＃13;

Answer 2

没有任何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 3

你在找这样的东西吗？

＆＃13;

#pentagon {
    position: relative;
    width: 54px;
    border-width: 0 18px 50px;
    border-style: solid;
    border-color: red transparent;
}
#pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: 50px;
    left: -18px;
border-style: solid;
border-width: 45px 45px 0 45px;
border-color: red transparent transparent transparent;
}

.logo-sponsor{
    z-index: 1000;
    position: absolute;
    top: 20px;
    left: 10px;
    width: 36px;
    height: auto;
    margin: 0 auto;
    display: block;
}

＆＃13;

<div id="pentagon">
  <img src="https://cdn3.iconfinder.com/data/icons/picons-social/57/43-twitter-48.png" class="logo-sponsor">
</div>

＆＃13;

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

3 个答案: