剪辑但没有移除空间

Question

很难找到一个标题，所以我会在这里正确解释myselft。

所以我用css剪辑将这个块左下角切掉，但这个属性只有＆＃34; hidde＆＃34;我的蓝色空间，我想剪切并删除这个角落创建的空间。

所以我的问题是如何做到这一点......？ 这是我的html / css：

＆＃13;

＆＃13;

#japon
{
    width: 800px;
    height: 730px;
    position:absolute;
    top:0px;
    right:0px;
    border: 3px solid black;
    clip:rect(0px,806px,830px,-780px);
}

#blockjapon
{
    width: 800px;
    height: 730px;
    background-color:#65d5fd;
    transform: rotate(345deg);
    border:3px solid black;
}

＆＃13;

    <section id="japon">
        
        <div id="blockjapon"></div>
        
    </section>

＆＃13;

＆＃13;

＆＃13;

Answer 1

此解决方法隐藏了正文水平溢出，但请注意，仅当#japon设置right:0px;

时才会起作用

body {
  overflow-x: hidden;
}
#japon
{
    width: 800px;
    height: 730px;
    position:absolute;
    top:0px;
    right:0px;
    border: 3px solid black;
    clip:rect(0px,806px,830px,-780px);
}

#blockjapon
{
    width: 800px;
    height: 730px;
    background-color:#65d5fd;
    transform: rotate(345deg);
    border:3px solid black;
}

<section id="japon">
        
        <div id="blockjapon"></div>
        
    </section>

Answer 2

如果您只是将overflow: hidden添加到外部div，它似乎可以解决它。

＆＃13;

＆＃13;

#japon
{
    width: 800px;
    height: 730px;
    position:absolute;
    top:0px;
    overflow:hidden; /* <--- */
    right:0px;
    border: 3px solid black;
    clip:rect(0px,806px,830px,-780px);
}

#blockjapon
{
    width: 800px;
    height: 730px;
    background-color:#65d5fd;
    transform: rotate(345deg);
    border:3px solid black;
}

＆＃13;

    <section id="japon">
        
        <div id="blockjapon"></div>
        
    </section>

＆＃13;

＆＃13;

＆＃13;