Rotate svg in a div container

whitecircle 0
Viewed 29

I created an svg. Since I need to rotate it by 45degree, I wrapped it in a div that I transform with a rotation.

It works but the svg overflows the window.

Here the code:

.container {
  background-color: tomato;
  transform: rotate(45deg);
  width: max-content;
}
<div class="container">
  <svg width="200" height="200" x="0" y="0">
    <rect x="0" y="0" width="100" height="100" fill="pink" stroke="black" />
    <rect x="100" y="0" width="100" height="100" fill="white" stroke="black" />
    <rect x="0" y="100" width="100" height="100" fill="white" stroke="black" />
    <rect x="100" y="100" width="100" height="100" fill="white" stroke="black" />
  </svg>
</div>

This is what I would like to obtain:

enter image description here

svg css html
1 Answers

I would rotate just svg, because you don't need to rotate whole container. You still need add some padding because, when you rotate square it is longer left to right than before.

.container {
  width: max-content;
  padding: 50px;
}

svg {
  transform: rotate(45deg);
}
<div class="container">
  <svg width="200" height="200" x="0" y="0">
    <rect x="0" y="0" width="100" height="100" fill="pink" stroke="black" />
    <rect x="100" y="0" width="100" height="100" fill="white" stroke="black" />
    <rect x="0" y="100" width="100" height="100" fill="white" stroke="black" />
    <rect x="100" y="100" width="100" height="100" fill="white" stroke="black" />
  </svg>
</div>

ruckie0
Related