我想为用户头像图像创建星形。
我不知道如何以这种形状填充图像。
我的代码:
#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>