CSS rotating 3 blocks

Asked Aug 22 '23 at 19:50

Active Aug 22 '23 at 20:00

Viewed 41 times

For my project I'm trying make 3 blocks with a rotation of 9 degrees. Unfortunately I get some white space and I can't get rid of it.

Example

.homeholder {
  float: left;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.homeholder .box {
  float: left;
  position: relative;
  width: calc((100% / 3) - 5px);
  height: 100%;
  transform: rotate(9deg);
  margin-right: 7px;
}

.homeholder .box.restaurant {
  background-color: red;
}

.homeholder .box.rooms {
  background-color: blue;
}

.homeholder .box.about {
  margin-right: 0px;
  background-color: green;
}

<div class="homeholder">
  <div class="box restaurant"></div>
  <div class="box rooms"></div>
  <div class="box about"></div>
</div>

edited Aug 22 '23 at 19:56

Yogi

6,241
3
24
30

asked Aug 22 '23 at 19:50

Moerman Jansen BV

Avoid using `float` in 2023 – Roko C. Buljan Aug 22 '23 at 19:55
Why don't you just use a gradient background at an angle? And why the margin? – Roko C. Buljan Aug 22 '23 at 19:56
3

Why have a right margin on each box? – A Haworth Aug 22 '23 at 19:58
Also why the magic number `5` in `width: calc((100% / 3) - 5px);` – Roko C. Buljan Aug 22 '23 at 20:03
Was this the desired? https://jsfiddle.net/otvr3z05/ PS: how is this supposed to behave on responsive? – Roko C. Buljan Aug 22 '23 at 20:05
@RokoC.Buljan The thing I'm trying to achieve is to have 3 clickable blocks on the page like this: https://imgur.com/a/DtRGPXs The colors are just for the first step. I used a margin on the blocks because they where overlapping a little, so I used the -5px in the calc because they won't fit next to eachother. – Moerman Jansen BV Aug 22 '23 at 20:35
1

read this: https://css-tricks.com/css-grid-and-custom-shapes-part-2/ and thank me later. A quite long article but it worth it – Temani Afif Aug 22 '23 at 21:42

CSS rotating 3 blocks

0 Answers0