Question

以下是摘录：

＆＃13;

.out {
    margin: 100px auto;
    width: 50%;
    height: 100px;
    background-color: green;
    
}

.in {
    width: 50%;
    height: 50px;
    background-color: red;
    transform: translate3d(-20%, -40%, 0px) scale(0.7);
    position: absolute;

}

＆＃13;

<div class="out">
    <div class="in">
    </div>
    
</div>

＆＃13;

可以看出，内部元素（红色方块）超出了外部元素的边界/边界（绿色方块）。

有没有人有关于如何剪切出外部元素边界的内部元素部分的想法？

-

我发现overflow: hidden由于内部元素中的position: absolute属性而无法正常工作..

Answer 1

在外部元素上添加overflow:hidden：

＆＃13;

.out {
    overflow:hidden;
    margin: 100px auto;
    width: 50%;
    height: 100px;
    background-color: green;
    
}

.in {
    width: 50%;
    height: 50px;
    background-color: red;
    transform: translate3d(-20%, -40%, 0px) scale(0.7);

}

＆＃13;

<div class="out">
    <div class="in">
    </div>
    
</div>

＆＃13;

Answer 2

你可以尝试这个：

.out {
    margin: 100px auto;
    width: 50%;
    height: 100px;
    background-color: green;
     overflow:hidden;
}

.in {
    width: 50%;
    height: 50px;
    background-color: red;
    transform: translate3d(-20%, -40%, 0px) scale(0.7);


}

DEMO

在css3中，如何使用外部元素的边界剪切内部变换的`position：absolute`元素？

2 个答案: