html - Diagonally divs filling complete space of parent div -


i'm trying create div relative height , width, in 3 boxes, being diagonally aligned , fill complete space of relative parent div.

it's kinda tough me explain, here's picture on how mean it: http://i.imgur.com/s2ustvu.png besides little space between red lines space should covered diagonal boxes.

is possible somehow? i'm grateful every advice or tip can shoot me!

following code got far. problem i'm stuck how make diagonal divs fill out complete space around them.

<div class="parent">   <div class="box-1">box1</div>   <div class="box-2">box2</div>   <div class="box-3">box3</div> </div> 

css:

.box-1 {   -ms-transform: rotate(-10deg);   -webkit-transform: rotate(-10deg);   transform: rotate(-10deg);   width: 100%;   margin: 0px 0px 10px 0px;   height: 33.33%; }  .box-2 {   -ms-transform: rotate(-10deg);   -webkit-transform: rotate(-10deg);   transform: rotate(-10deg);   width: 100%;   margin: 0px 0px 10px 0px;   height: 33.33%; }  .box-3 {   -ms-transform: rotate(-10deg);   -webkit-transform: rotate(-10deg);   transform: rotate(-10deg);   width: 100%;   height: 33.33%; } 

greetings, toumazi!

you try that: fiddle

.parent {     position: absolute;     width: 100%;     height: 100%;     left: 0;     top: 0; } .parent > div {     background: #c1c1c1; } .box-1 {   -ms-transform: rotate(-10deg);   -webkit-transform: rotate(-10deg);   transform: rotate(-10deg);   width: 100%;   margin: 0px 0px 10px 0px;   height: 33.33%; }  .box-2 {   -ms-transform: rotate(-10deg);   -webkit-transform: rotate(-10deg);   transform: rotate(-10deg);   width: 100%;   margin: 0px 0px 10px 0px;   height: 33.33%; }  .box-3 {   -ms-transform: rotate(-10deg);   -webkit-transform: rotate(-10deg);   transform: rotate(-10deg);   width: 100%;   height: 33.33%; } 

Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -