削减剪辑，但不是删除空间

Question

那么它很难找到一个标题，所以我会在这里正确解释自己。

所以我切这块左下角用CSS剪辑，但该酒店只“hidde”我的蓝色空间，我希望削减和消除由这个角落创造的空间。

所以我的问题是如何做到这一点......？ 这里是我的HTML/CSS：

#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 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到外格，似乎解决它。

#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; 
 
}

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