Exotit Exotit - 15 days ago 6
CSS Question

Clip cut but isn't removing the space

Well it was hard to find a title so i will explain myselft properly here.

enter image description here

So i cut this block left bottom corner with the css clip but this property only "hidde" my blue space and i want to cut and remove the space created by this corner.

So my question is how to do this...?
here is my 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>




rnd rnd
Answer

This workaround hides the body horizontal overflow, but keep in mind that will work only if #japon sets 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>

Comments