Question

我正在开发某种绘图应用。容器div中有元素，顶部还有另一个div，它应该夹在里面的所有元素。

红色矩形"#clip必须剪切#container div中的所有元素，因此隐藏#clip div之外的任何元素或元素的一部分。

怎么可能这样做？

任何帮助将不胜感激。

Answer 1

据我所知，真的无法真正剪辑它。

如果你的背景是白色的，你可以模拟这个想法，在它周围留下一个巨大的白色阴影

#clip {
    position: absolute;
    width: 300px;
    height: 300px;
    border: solid 2px red;
    top: 50px;
    left: 50px;
    box-shadow: 0px 0px 0px 1000px white;
}

demo

Answer 2

将以下css添加到#clip：

box-shadow: 0px 0px 0px 25px white;

此处，#clip的白色阴影与需要剪裁的内容重叠，从而产生 剪辑效果 。

这是 DEMO 。

Answer 3

由于您无法修改 html，因此我没有看到纯 css 解决方案。也许你可以用 js 跟踪剪辑。

const computeClip=function(target,mask){
    let maskRect = mask.getBoundingClientRect();
    let targetRect=target.getBoundingClientRect();;
    let clip='rect('
        +(maskRect.top-targetRect.top)+'px,'
        +(maskRect.left+maskRect.width-targetRect.left)+'px,'
        +(maskRect.top+maskRect.height-targetRect.top)+'px,'
        +(maskRect.left-targetRect.left)+'px)';
    target.style.clip=clip;

};

demo

使用另一个div在div中剪辑内容

3 个答案: