Hello. I got a template whose sections are not rectangular. I tried to cut it, but I didn’t have it all very well (the code below) and tried to do everything with the help of cliparts. In general, I am at an impasse. Tell me how to properly such sections. Code with after

* { box-sizing: border-box; } .wrapper{ max-width: 970px; } header { width: 100%; min-height: 1086px; background-image: url(http://s020.radikal.ru/i718/1610/53/2e62f2d87942.jpg); background-repeat: no-repeat; background-size: contain; } .spiker { width: 100%; min-height: 1371px; background-image: url(http://s017.radikal.ru/i416/1610/f3/0f627944ef70t.jpg); background-repeat: no-repeat; background-size: contain; } .spiker::after { width: 100%; height: 163px; top: 20px; position: absolute; background-image: url(http://s45.radikal.ru/i110/1610/c3/9837344ef991t.jpg); background-repeat: no-repeat; background-size: contain; content: ''; } 
 <div class="wrapper"> <header> </header> <section class="spiker"> </section> </div>

Clipart code

 body { width: 80%; margin: 0 auto; overflow: hidden; } header{ width: 280px; height: 280px; background: red; -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 75%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0 75%); } .section1{ width: 280px; height: 280px; background: #1e90ff; -webkit-clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 75%); clip-path: polygon(0 0, 100% 30%, 100% 100%, 0 75%); } 
 <body> <header></header> <section class="section1"></section> </body>

enter image description here

  • Considering how poorly the clip-path supported, would it not be better to use transform:rotate with a pre-rotated image (or use transform:skew , return the image itself inside with transform:skew in the opposite direction and trim it all with overflow:hidden ) ? - Surfin Bird
  • And with this section, what should I do? s009.radikal.ru/i308/1610/76/362388ea4728.jpg - Slivki show
  • If the background is black, you can generally do with one SVG, for example. Well, or put on the background of the three black blocks, the upper and lower skew'nuty. - Surfin Bird
  • Uh, I don't understand - Slivki show
  • there is not just a black background there a picture and moreover it’s already in Photoshop already sliced - Slivki show

2 answers 2

 .el1, .el2, .el3 { background-size: cover; color: #fff; height: 500px; margin: 0; overflow: hidden; padding: 0; position: relative; text-align: center; } .el1 { background: url(https://unsplash.it/600?image=1080) no-repeat; -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 77%); clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 77%); } .el2 { background: url(https://unsplash.it/600?image=1068) no-repeat; -webkit-clip-path: polygon(0 0, 100% 23%, 100% 100%, 0 77%); clip-path: polygon(0 0, 100% 23%, 100% 100%, 0 77%); margin-top: -120px; } .el3 { background: url(https://unsplash.it/600?image=1063) no-repeat; -webkit-clip-path: polygon(0 0, 100% 22%, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 22%, 100% 100%, 0% 100%); margin-top: -120px; } 
 <div class="el1"></div> <div class="el2"></div> <div class="el3"></div>

  • The example does not work - mJeevas
  • @mJeevas which browser does not work? - Zoltan Toth
  • firefox does not work - mJeevas

  1. you put the pictures on the background, on top of them you make blocks rectangles and apply transform to them: skew.

  2. You can immediately apply to the photo transform: skew.

ps judging by the fact that the photos are not rotated, use option 1.

here is an example

 <div class="wrapper"> <div class="block1"></div> <div class="block2"></div> <div class="block3"></div> </div> .wrapper { width: 700px; margin: 0 auto; } .block1 { height: 400px; background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"); background-size: 800px; background-position: 50%; margin-bottom: -100px; border: 2px solid #f00; } .block2 { border: 2px solid #0f0; height: 400px; overflow: hidden; background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"); background-size: 800px; background-position: 50%; transform: skew(0deg, 10deg); } .block3 { height: 400px; background-image: url("https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150"); background-size: 800px; background-position: 50%; margin-top: -100px; border: 2px solid #00f; }

http://codepen.io/Doker99725/pen/XjwGzd