How to create pentagon shape for avatar image?

问题

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

Looking for shape that point down not top.

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.

Pentagon example

回答1:

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>

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>

回答2:

You could use a clip-path

CSS-Tricks Link

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>

回答3:

Are you looking for something like this?

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

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

来源：https://stackoverflow.com/questions/27381057/how-to-create-pentagon-shape-for-avatar-image

标签

html

css

html5

css-shapes