Here there are 3 blocks, two from the top and one from the bottom, the top two cut off the bottom, and the line between them is border, when aiming at any block, the background increases, I can’t figure out how to cut.

Unusual design

  • describe in more detail what is happening on the tip, how exactly the background increases - MasterAlex
  • the background (image) increases in the center, I tried to tilt the blocks transform: skew, but this is not what some ideas can have ... - Solunski.D
  • The idea to make blocks on canvas comes to a vise, and then if the block has overflow: hidden everything will be trimmed as it should - MasterAlex
  • I also thought about it, tried tilting the blocks with a skew, and turning the inner block back, only the border does not come out ... I also thought of using the clip-path, but you can completely forget about the support of the old browsers - Solunski.D
  • codepen.io/anon/pen/mPNEex?editors=0100 I haven't finished this yet - user33274

3 answers 3

I suggest not to cut.

html
to create a lower block in the form of a diamond, it is enough to rotate a rectangular or square block under 45%, while setting the parent block overflow: hidden .

 .parent { overflow: hidden; } .child { transform: rotate(45deg); }

Because a turn at 45 degrees, a propalagette turn and an internal content under 45, then inside. the contents need to be rotated 45 degrees in the opposite direction.

 .child { transform: rotate(45deg); } .child__inner { transform: rotate(-45deg); }

picture
At the same time, images should not be cut in any particular way, it is desirable that it be large enough to compensate for the zoom.

limitations
It is necessary to manually adjust the coordinates of the diamond and int. content.

Working example

For html and css , jade and stylus preprocessors are used accordingly. If you are not familiar with them, there is a View Compiled button in each block.

  • Thank you very much, I didn’t even think to turn the block ... - Solunski.D
  • one
    But after all, there should be equal angles of 120 degrees, while turning the bottom one turns out 90, and the other two - 135 ... - Qwertiy ♦
  • @Qwertiy You are right, as the rectangle / square does not twist, there will be an angle of 90 degrees all the same. I did not pay attention to this moment when I made an example. But the idea was not bad?). It is necessary to poraskinut brains, but trimming, I think this is an extreme option. Perhaps with svg and masks you can think of something. But I have very little time now, I will try to set aside a minute later. Thank you very much for noticing! - olegatro
  • The task really turned out to be not simple, which is why I decided to share the problem) Designers are certainly interesting people, but sometimes they come up with something like that ... - Solunski.D.
  • @Olegatro, and I thought about the turn myself, but decided to keep quiet around the corner. The transformation can be applied to make a box - you can try in this direction. But there you have to think and consider ... - Qwertiy ♦

 *{ margin:0; padding:0; } .wrapper{ width:600px; height:500px; border:1px solid transparent; margin:20px auto; overflow:hidden; position:relative; } .odin{ width:300px; height:200px; border-right:2px solid #fff; border-bottom:none; position:relative; top:1px; left:1px; background:red; } .odin_a{ width:300px; height:500px; background:url(http://alleya-mebeli.ru/wp-content/uploads/2014/03/bianka.jpg); background-size:300px 500px; position:absolute; top:0; left:0; z-index:98; overflow:hidden; transition:.5s; border-right:2px solid #fff; } .odin_a:hover{ background-size:400px 600px; background-position:-30px -50px; } .dva{ width:300px; height:500px; border-left:2px solid #fff; background:url(http://www.rehabmedical.ru/images/sensroom/photogallery/Spb1.jpg); background-size:300px 500px; position:absolute; right:0; top:0; transition:.5s; border:2px solid #fff; } .dva:hover{ background-size:750px 900px; background-position:-40px -40px; } .try{ width:600px; height:600px; border:1px solid blue; border-top:2px solid #fff; border-right:2px solid #fff; transform:rotate(-45deg); position:relative; left:50%; margin-left:-300px; top:123px; z-index:100; background:blue; overflow:hidden; } .try_b{ width:130%; height:130%; background:url(http://www.news-ontime.ru/wp-content/uploads/2014/08/detskaya-komnata-45.jpg); background-size:cover; transform:rotate(45deg); margin:-150px 90px; transition:all .5s; } .try_b:hover{ background-size:120% 120%; } 
 <div class="wrapper"> <div class="odin"> <div class="odin_a"></div> </div> <div class="dva"> <div class="dva_a"></div> </div> <div class="try"> <div class="try_b"></div> </div> </div>

I can not do just one block - the lowest, transition, dear public, I hope will help

http://codepen.io/anon/pen/mPNEex?editors=1100 completed! example

  • I nakosorezil there - in general, the extra blocks twisted, you can reduce - user33274
  • under my decision, the commentator noted the moment about the same angle of 120 degrees) - olegatro
  • Why did you write the @Olegatro solution again? or if you think that there are other images, then the implementation through the same transform:rotate(45deg); will not be noticeable transform:rotate(45deg); ? - MasterAlex
  • I think the author simply did not see my solution, I am already experimenting with svg and mask, I have to solve the zoom problem. But to use the triangle as a mask for the image is quite possible. - olegatro
  • I saw that there is another thing, that I have no fixed width ... width: 100% and height: 100% and make it more adaptive ... - Solunski.D

Alternatively, you can use the clip-path

 .container{ width:1000px; height:800px; margin:0 auto; position:relative; overflow:hidden; } .left, .right, .bottom { transition:linear 200ms; float:left; position:absolute; z-index:1; background:#FFF; } .left .bg, .right .bg, .bottom .bg { transition:linear 200ms; position:absolute; } .left { height:800px; width:800px; left:-300px; top:0; clip-path: polygon(0 0, 100% 0, 100% 560px, 300px 100%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 560px, 300px 100%, 0 100%); } .left .bg { width:798px; height:800px; left:0; top:0; background:url(https://www.firestock.ru/wp-content/uploads/2014/05/abstract-rings-background-700x524.jpg) no-repeat 0 0; background-size:cover; clip-path: polygon(0 0, 100% 0, 100% 558px, 300px 100%, 0 100%); -webkit-clip-path: polygon(0 0, 100% 0, 100% 558px, 296px 100%, 0 100%); } .right { height:800px; width:800px; top:0; right:-299px; clip-path: polygon(0 0, 100% 0, 100% 100%, 500px 100%, 0 560px); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 500px 100%, 0 560px); } .right .bg { width:798px; height:800px; right:0; top:0; background:url(https://www.firestock.ru/wp-content/uploads/2015/12/Dollarphotoclub-65301126-light-700x466.jpg) no-repeat 0 0; background-size:cover; clip-path: polygon(0 0, 100% 0, 100% 100%, 500px 100%, 0 560px); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 504px 100%, 0 558px); } .bottom { height:540px; width:1000px; left:0; bottom:-298px; clip-path: polygon(0 100%, 0 240px, 50% 0, 100% 240px, 100% 100%); -webkit-clip-path: polygon(0 100%, 0 240px, 50% 0, 100% 240px, 100% 100%); } .bottom .bg { height:539px; width:100%; left:0; bottom:0; background:url(http://www.sunhome.ru/UsersGallery/wallpapers/233/goluboi-fon-oboi.jpg) no-repeat 0 0; background-size:cover; clip-path: polygon(0 100%, 0 242px, 50% 2px, 100% 242px, 100% 100%); -webkit-clip-path: polygon(0 100%, 0 242px, 50% 2px, 100% 242px, 100% 100%); } .left:hover { z-index:2; left:0; } .right:hover { z-index:2; right:0; } .bottom:hover { z-index:2; bottom:0; } 
 <div class="container"> <div class="left"> <div class="bg"></div> </div> <div class="right"> <div class="bg"></div> </div> <div class="bottom"> <div class="bg"></div> </div> </div>

  • and you are not confused by how the images behave when you hover? See the examples below for how guidance works there. And the author wrote in the comments right away: “I thought to use the clip-path, but then you can completely forget about the support of the old browsers” - MasterAlex
  • In principle, the idea is also interesting), but this is not what is needed ... For now, it is better not to use the clip-path at all - Solunski.D
  • clip-path is not cross-browser, I also wanted to do so - user33274