-3

How can i create a 45 degrees turned rectangle in css? I have no clue where to start...

Example

Mike Lammers
  • 542
  • 9
  • 27
  • 1
    Start by [rotating it](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/rotate). – web-tiki May 22 '17 at 07:41
  • Why didn't you want make this section through background-image? otherwise use transform: rotate(-45deg); – grinmax May 22 '17 at 07:59
  • Take a look at CSS transforms: https://developer.mozilla.org/en-US/docs/Web/CSS/transform – gregory May 22 '17 at 07:40

1 Answers1

1

You could use CSS Transform to accomplish this. See the example code below:

div.examplediv {
    margin-left: 100px;
    width: 100px;
    height: 100px;
    background-color: lightblue;
    /* Rotate div */
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

p.exampletext {
    /* Rotate p back so that only div is rotated. */
    -ms-transform: rotate(-45deg); /* IE 9 */
    -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
    transform: rotate(-45deg);
    }
<div class="examplediv">
   <p class="exampletext">
      Hello
   </p>
</div>

For more information check out this

Hope this helps!

Deathstorm
  • 818
  • 11
  • 36