我有以下内容:
.circle
内有.object
。请参阅下面的代码(并查看完整的屏幕示例)。
我希望.object
来自底部(动画),因此圈子可以是overflow: hidden;
,但我希望.object
从顶部出来。有关最终结果,请参阅this image。
简而言之: .object
应该只与底部的.circle
相同。
所以我认为svg
面具(底部边界半径为50%的正方形)可以做到这一点。到目前为止,没有运气可以让它工作。
我错过了什么吗?我没有正确使用它吗? SVG不能用于屏蔽div
元素吗?或者是否有另一个明显解决此问题的方法?
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
background: gold;
width: 100%;
height: 100%;
position: relative;
}
.circle {
background: LightCoral;
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
clip-path: url(#clipping);
}
.object {
background: DeepSkyBlue;
width: 150px;
height: 350px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

<div class="container">
<div class="circle">
<div class="object"></div>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 300 300">
<defs>
<clipPath id="clipping">
<path class="cls-1" d="M0,0H300V150H0V0ZM300,150A150,150,0,0,1,0,150" />
</clipPath>
</defs>
</svg>
</div>
</div>
&#13;
答案 0 :(得分:2)
您不需要为此使用SVG剪辑或蒙版。只需将对象包装在一个圆底且溢出设置为隐藏的div中。
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
.container {
background: gold;
width: 100%;
height: 100%;
position: relative;
}
.circle {
background: LightCoral;
width: 300px;
height: 300px;
position: absolute;
left: 50%;
transform: translate(-50%, 0);
border-radius: 50%;
}
.mask {
width: 300px;
height: 1000px;
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
border-bottom-left-radius: 150px;
border-bottom-right-radius: 150px;
overflow: hidden;
}
.object {
background: DeepSkyBlue;
width: 150px;
height: 350px;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
&#13;
<div class="container">
<div class="circle">
<div class="mask">
<div class="object"></div>
</div>
</div>
</div>
&#13;