I have a site layout (I found it in the internet), on this layout there are oblique blocks and photos on two blocks at once, how can I do this? html, css enter image description here

    1 answer 1

    The clip-path property works well in such cases.

    section { width: 100%; height: 70vh; background-color: rgb(106, 155, 242); clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%); background-image: linear-gradient(to bottom, #ff2a3d, #fe4835, #fc5e2e, #fa7029, #f68127); } 
     <section><section>

    • one
      clip-path neither IE nor Edge supported - Air
    • one
      @Air Well, there will be no bevel in ie, there will be a standard rectangle, is that a problem? In 2018, to equate themselves in such trifles is pedantry. Is that if there is a requirement in the support of ie, then you need to use svg - l2banners
    • So this is just an oblique section, and on the layout the block is divided into two parts, orange and white. How to do it? - Matvey Samokhin
    • @MatveySamohin add a white background for example - l2banners