How to draw rotated element as backgorund in HTML


Tags: html,css

Problem :

I wonder how to draw a rotated element and set it as background? I was thinking about creating the element, for example a div and in CSS with position absolute, and just rotate it, but there must be a smarter way for that.

Something like this, at full size in browser:

something like this, at full size in browser



Solution :

To achieve a similar result to the picture you provided, you can create three div elements, fix them and use the transform property in CSS:

.element {
    position: fixed;
    transform: rotate(10deg) skew(10deg); /* 10 is used as an example */
}

I would suggest, however, that you drew the image in an image editor and just set it as background to the body. There is no need to overcomplicate things.


    CSS Howto..

    How to create diagonal boxes using css?

    How to properly use CSS borders to visualize a value chain?

    How to select text that is not marked up with CSS/jquery?

    How to use active and before with CSS?

    How to display text on the same line?

    How to display a div forcefully

    Div inside how to call class in css?

    HTML - How do css/javascript files get loaded?

    How can I have multiple jQuery button styles on one page?

    Do you know about this weird thing. “AS3, Button width cannot change by setStyle(). However, inline CSS can change width.”

    How to change css for span in span?

    How to style QTableView CSS

    How do I get my HTML page to display in the browser without horizontal and vertical scroll bars?

    How to make 3-corner-rounded triangle in CSS

    How Do I Code a Popover in Rails 4.2.5 Using gem bootstrap-sass (Bootstrap 2)?

    How not to display / filter out special characters? (CSS or Javascript)

    How can you align all the cells to the left with css [closed]

    How to replace a Font Awesome icon within link text with a different icon on link click?

    how to center perfectly image and text inline in the center of page

    How can I control the css of cloned
    with Javascript?

    How to set Bootstrap's hero unit height to 100%?

    jQueryUI Autocomplete: how to use 'first-of-type' and 'last-of-type' with #ui-active-menuitem?

    How to draw arrows in CSS [closed]

    How to apply different css style to gwt datagrid widget in the same page? [duplicate]

    Show and Hide option for DIV(needs modification)

    How do I specify in HTML or CSS that a table column should have the minimum width

    Glide.js, how to check size of image?

    How can I make my
    fit vertically into a parent div?

    Preload all CSS images while showing a preloader

    How to apply css style for HTML element using Mootools