Thierry Geldof Thierry Geldof - 1 year ago 91
Sass (Sass) Question

Fit rotated square in parent square?

I want to create a square which is 50% of the container (and auto height?). In this square I want a rotated square which points touch the parents borders (no overflow). It also has to be responsive.

.square {
height: 50%;
width: 50%;
.square-inner {
transform: rotate(45deg);
background: red;
height: ??:
width: ??;
}
}

Answer Source

you can use position relative and absolute , & percentage to draw it

see the following :

.square {
    width: 50%;
    padding-top: 50%;
     background:blue;
     position: relative;     
}
 .square-inner {  
        transform: rotate(45deg);
        background:red;
        height: 70%;
        width: 70%;
        margin:auto;
       position: absolute;
  top:15%;
  left:15%;
    }
<div class="square">
<div class="square-inner">


</div>

</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download