Have a nice day

Let's start with the fact that I'm kind of like a novice in this area. I work with the front-end for a long time. But now there is a question. Perhaps he is stupid and after googling I somehow did not find an answer to it.

The question itself

Have you ever seen lp, which has a shaded photo on a fill, and moreover it is filled into an irregularly shaped figure. This is not just a rectangle - it is generally without problems. I'm talking about triangular or trapezoidal (xs, trapezium is shorter). How do you actually do this? If we consider that the content inside can be expandable. If so with expandable in any way, then how to make at least a fix? As an example of what I'm talking about - I attach a screen.

It is worth considering that this is done ALL lp. With different fills and slope of the joint.

enter image description here

    2 answers 2

    Really with CSS3, stretch the shape you want, it can be any size using

    transform: skew(0deg, -5deg);

    here's an example on feedl: https://jsfiddle.net/acrashik/9thzrwey/2/

    • The option is suitable if you are satisfied with the deformation of the background, which is also subject to the influence of skew - Vitaly Emelyantsev
    • For example, the author’s background is just one-color, so there won't be any distortions there. - crashik

    To avoid background deformation when converting a block - you can use the clip-path :

    enter image description here

     .content { background-color: rgba(255, 255, 255, 0.2); border: 1px dashed #d11d05; padding: 20px; } section.-bg-first { background: #bada55 url('http://sunflowercet.org/b/wp-content/plugins/fancy-text-widget/images/ftw-body-horizontal-lines-paper.png'); } section.-bg-second { background: #fb1 url('http://sunflowercet.org/b/wp-content/plugins/fancy-text-widget/images/ftw-body-horizontal-lines-paper.png'); } section.-skew-bottom { padding-bottom: 40px; } section.-skew-top { -webkit-clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%); margin-top: -40px; padding-top: 40px; } 
     <section class="-bg-first -skew-bottom"> <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni labore voluptatum fuga molestias quasi, quidem quia cupiditate assumenda sunt rem. Et doloribus hic dicta, necessitatibus illum veritatis possimus inventore minima?</div> </section> <section class="-bg-second -skew-top -skew-bottom"> <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni labore voluptatum fuga molestias quasi, quidem quia cupiditate assumenda sunt rem. Et doloribus hic dicta, necessitatibus illum veritatis possimus inventore minima?</div> </section> <section class="-bg-first -skew-top"> <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni labore voluptatum fuga molestias quasi, quidem quia cupiditate assumenda sunt rem. Et doloribus hic dicta, necessitatibus illum veritatis possimus inventore minima?</div> </section>

    Or look at jsfiddle

    But you need to consider browser compatibility . In browsers without clip-path support, the edges will be even, and for sections the upper indents will be larger than the lower ones:

    enter image description here

    • The truth is sad that, indeed, support is not the best. On FF, there is no support even on new versions. - Denis Okunev