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

我的代码:



#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之间的图片。

最佳答案

我想要一张div之间的图片。


可以通过多种方式来解释上述语句-(1)您要用图像填充形状,将图像限制在形状的边界并剪切任何多余的部分,或者(2)您只想放置一个在星顶的图像。



对于情况1:如果您需要创建这种复杂的形状并且还需要填充图像,那么最好的选择是使用SVG而不是CSS。

SVG可以更好地控制形状,将图像保持在形状的边界内,还可以将悬停(命中区域)限制在形状的边界内。



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

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







对于情况2:或者,如果您只是想将图像放置在形状的顶部,则可以使用有问题的CSS本身,然后将图像绝对放置在形状的顶部。几乎没有什么值得注意的事情是(1)使使用诸如此类方法的边框创建的形状响应非常困难(2)图像应该具有固定的高度和宽度,如果没有,图像很有可能会溢出并且在星形之外也可见。



.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%);
}

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

10-05 20:38
查看更多