Help me please. I need to do:

  1. Diva irregularly shaped
  2. So that when you hover on div changed the background

So far, I only succeed in imposing rectangular blocks with a background, but in this case they climb up on each other and only a part of the background changes on hover. Maybe you can tell how it is better to implement?

Thank you in advance

HTML

<div class="serv_block"> <div class="serv_block1"></div> <div class="serv_block2"></div> <div class="serv_block3"></div> <div class="serv_block4"></div> </div>`

CSS

 .serv_block1 { background: url(../img/serv_block1.png) no-repeat top left; width: 100%; height: 650px; z-index: 9; position: relative; float: left; -webkit-clip-path: polygon(0 0%,100% 0,50% 100%,0 100%); margin-left: -9%; margin-top: -100px; shape-outside: url(../img/serv_block1.png); } .serv_block4:hover { background: url(../img/serv_block44.png) no-repeat top right; } .serv_block2 { background: url(../img/serv_block2.png) no-repeat top right; width: 100%; height: 650px; z-index: 9; position: relative; float: right; -webkit-clip-path: polygon(0 0%,100% 0,100% 100%,0% 100%); margin-right: -6%; margin-top: -650px; shape-outside: url(../img/serv_block2.png); } .serv_block3 { background: url(../img/serv_block3.png) no-repeat top left; width: 100%; height: 650px; z-index: 9; position: relative; float: left; -webkit-clip-path: polygon(0 0%,100% 0,50% 100%,0 100%); margin-left: -9%; shape-outside: url(../img/serv_block3.png); } .serv_block4 { background: url(../img/serv_block4.png) no-repeat top right; width: 100%; height: 650px; z-index: 9; position: relative; float: right; overflow:hidden; -webkit-clip-path: polygon(0 0%,100% 0,100% 100%,0% 100%); margin-right: -6%; margin-top: -650px; shape-outside: url(../img/serv_block4.png); }

Blocks

  • Please attach the functional part of your code to the question - Alexandr Blinov
  • Added code which is now - lxxnutsxxl
  • one
    I have already corrected, but please, for the future, use the tags "Code" and their ilk. - Alexandr Blinov
  • thanks, I will be more attentive - lxxnutsxxl
  • oh, how do designers think:? ( - Lieutenant Jim Dangle

1 answer 1

I think a good decision to make two nested blocks. The exterior defines a shape with one bevelled side:

 transform: perspective(300px) rotateX(-30deg); transform-origin: 0% 50%; overflow: hidden;

And the inner one with the background undergoes a reverse transformation so that the picture in the background is not distorted.

  background-image: url('...'); transform: perspective(300px) rotateX(30deg); transform-origin: 0% 0%;