如何为头像图像创建星形？

Question

我想为用户头像图像创建星形。 我不知道如何以这种形状填充图像。

我的代码：

#star {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #05ed08;
  position: relative;
}
#star:after {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid #05ed08;
  position: absolute;
  content: "";
  top: 30px;
  left: -50px;
}
<

<div id="star"></div>

我想在div之间找到一张图片。

Answer 1

  

我想在div之间找到一张图片。

有几种方法可以解释上述陈述 - （1）你想用图像填充形状，将图像限制在形状的边界并剪辑任何额外的部分或（2）你只想把图像放在星星上面。

对于案例1：如果您需要创建这样复杂的形状并且还要填充图像，那么最好选择 使用SVG而不是CSS < / EM>

SVG允许更好地控制形状，使图像保持在形状的边界内，并且还将悬停（命中区域）限制在形状的边界。

＆＃13;

＆＃13;

svg {
  width: 200px;
  height: 200px;
}
path {
  fill: url(#g-image);
}

＆＃13;

<svg viewBox='0 0 100 100'>
  <defs>
    <pattern id='g-image' width='100' height='100' patternUnits='userSpaceOnUse'>
      <image xlink:href='https://placeimg.com/100/100/animals' width='100' height='100' />
    </pattern>
  </defs>
  <path d='M0,25 L33,25 50,0 66,25 99,25 75,50 99,75 66,75 50,100 33,75  0,75 25,50z' />
</svg>

＆＃13;

＆＃13;

＆＃13;

对于案例2：或者，如果您只是想在形状上面 放置图像 ，那么您可以使用给定的CSS问题本身，只是将图像绝对放在它上面。很少值得注意的事情是：（1）使用边框（例如这些方法）创建的形状是非常难以响应的（2）图像应该具有固定的高度和宽度，如果不是，它将有可能溢出并且在星形外也可见。

＆＃13;

＆＃13;

.wrapper{
  position: relative;
  width: 200px;
  height: 260px;
  border: 1px solid;
}
#star {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-bottom: 200px solid #05ed08;
  position: relative;
}
#star:after {
  width: 0;
  height: 0;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  border-top: 200px solid #05ed08;
  position: absolute;
  content: "";
  top: 60px;
  left: -100px;
}
img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}

＆＃13;

<div class='wrapper'>
  <div id='star'></div>
  <img src='http://placeimg.com/100/100/animals' />
</div>

＆＃13;

＆＃13;

＆＃13;