The Internet is full of guides on how to make a parallelogram, but there is no inverted parallelogram anywhere, sat for a couple of hours, nothing works, can you tell me, I will be very grateful! In the picture, the site container is drawn in black, and the parallelogram in blue is approximately what I need: enter image description here

    4 answers 4

    In general, if you want to do something like this, like in your picture, it’s best to use images to create a visual tilt, so as not to load the browser with useless rendering and not complicate the layout. But if you are unbearable, then keep a simple implementation

    * { box-sizing: border-box; } .wrapper { width: 500px; height: 320px; border: 1px solid #000; padding: 8px 15px; overflow: hidden; } .top { width: 100%; height: 120px; transform: skew(10deg) rotate(10deg) translateY(-40px); border-bottom: 1px solid blue; overflow: hidden; padding: 4px; } .top-inner { width: 100%; height: 110%; transform: skew(-10deg) rotate(-10deg) translateY(40px); border: 1px solid blue; border-bottom: 0; padding: 10px; text-align: center; } .middle { width: 100%; height: 110px; transform: skew(10deg) rotate(10deg) translateY(-40px); border: 1px solid blue; padding: 4px; margin-top: 20px; } .middle-inner { width: 100%; height: 110%; transform: skew(-10deg) rotate(-10deg) translateY(40px); padding: 10px; text-align: center; } .bottom { width: 100%; height: 120px; transform: skew(10deg) rotate(10deg) translateY(-40px); border-top: 1px solid blue; overflow: hidden; padding: 4px; margin-top: 20px; display: table; } .bottom-inner { width: 100%; height: 110%; transform: skew(-10deg) rotate(-10deg) translateY(-50px); border: 1px solid blue; border-top: 0; padding: 10px; text-align: center; display: table-cell; vertical-align: bottom; } 
     <div class="wrapper"> <div class="top"> <div class="top-inner"> Текст 1 </div> </div> <div class="middle"> <div class="middle-inner"> Текст 2 </div> </div> <div class="bottom"> <div class="bottom-inner"> Текст 3 </div> </div> </div>

    • Many thanks for the help and the work done, did not expect such a return) I liked your option most of all, except that it is cumbersome, but there is the same minus as everyone, when you set the parent's width to 100%, everything floats, and I like tires like th need. We will consider your answer the best, all the same I will use the image for the background. Thanks again! - Jack London
    • @JackLondon Not at all. If you want a rubber variant of such inclinations, then definitely it is better to make images. I somehow made a small landing page - eauthor.ru - there is something similar, you can study the styles - Vasya Shmarovoz
    • Yes, in your work, the eauthor is described in general an ideal variant, I will use it) Thank you! - Jack London

    For the transform property, specify two functions: tilt and turn

     transform: skew(20deg) rotate(90deg);

    or indicate a clear Y-axis tilt:

     transform: skewY(20deg);
    • Thanks for the help, your option is very similar to the one above. - Jack London

     #parallelogram { margin-top: 40px; overflow: hidden; width: 150px; height: 100px; background: blue; -webkit-transform: skewY(-15deg); transform: skewY(15deg); } 
     <div id="parallelogram"></div>

    • Thanks for the help, I tried this option, but when the width of the container is 100%, it does not work out very well, even if everything is positioned, the text inside the block is also tilted. - Jack London

    Alternatively, but for professional use, you need to do it differently, SVG

     SVG { display: block; } .svg-wrapper { width: 300px; height: auto; position: relative; } #svg2 { position: relative; top: -60px; } #svg3 { position: relative; top: -120px; } 
     <div class="svg-wrapper"> <svg id="" style="width:300px;height:100px;"> <polygon points="0,0 0,30 300,100 300,0 " style="fill: yellow; fill-opacity:1; stroke:blue;" /> </svg> <svg id="svg2" style="width:300px;height:200px;"> <polygon points="0,0 300,70 300,130 0,200" style="fill: yellow; fill-opacity:1; stroke:blue;" /> </svg> <svg id="svg3" style="width:300px;height:100px;"> <polygon points="0,100 300,100 300,0 0,70" style="fill: yellow; fill-opacity:1; stroke:blue;" /> </svg> </div>

    • As I understand it, he wants to do this in the structure of the site, i.e. in other words, in your example, inside the svg-polygons it should have html - Vasya Shmarovoz
    • @VasyaShmarovoz Anything can be thrust into SVG - user33274
    • Hmm, really. I tried, worked, never asked this question. But is this implementation correct? - Vasya Shmarovoz
    • @VasyaShmarovoz is not there, neither is the correct structure, I wrote that “for professional use you need to do something different”, they don’t learn to ruSO but can help if something does not work out, I set an example of how to do this really what did he do to get ahead ?! - user33274
    • Thanks for the help, the author of the question only spent 5 hours on googleg ... - Jack London