There is an image, any, preferably background, it is necessary to cut the angle using css tools as if it was implemented through photoshop: here’s an example for a slider enter image description here

The trick is that this image is shifting, that is, the typical behavior is left but it will appear completely as on the screen. I am able to cut foty on photoshop, but not an option. I tried through border-top-width but just a duplication of the image takes place, but I just need a bevel, the difficulty is that the background is not uniform, how can this be accomplished? The functionality of the slider does not interest but only the bevel and the image. For example, a monkey but only one angle, the left right - no matter what

enter image description here decided by yourself

  • Solved by yourself - user33274
  • The image is covered with css figures; the background of the figure makes it transparent or continuous as necessary - Sergey
  • agree - but if done automatically - it will be nonsense - user33274

2 answers 2

I offer you this option. CodePero

.block { display: inline-block; text-align: center; width: 1000px; } img { height: 400px; -webkit-clip-path: polygon(0 100%, 90% 100%, 100% 0, 0px 0px); clip-path: polygon(0 100%, 90% 100%, 100% 0, 0px 0px); } img.img2 { position: absolute; left: 350px; z-index: -1; } 
 <div class="block"> <img src="http://hronika.info/uploads/posts/2015-04/1429785852_krasota-kotoruju-mozhno-uvidet-lish-v-illjuminator-samoleta-foto-3.jpg" alt="" /> <img class="img2" src="http://hronika.info/uploads/posts/2015-04/1429785852_krasota-kotoruju-mozhno-uvidet-lish-v-illjuminator-samoleta-foto-3.jpg" alt="" /> </div>

  • does not work in all browsers except Chrome - user33274
  • @LenovoID use caniuse.com/#search=clip-path . For some browsers, you need to add an SVG mask and connect using url(#mask) . I gave you a fishing rod, catch :) - malginovdesign

 .wrapper{ position:relative; width:300px; height:180px; border:1px solid transparent; overflow:hidden; margin:30px auto; } .wrapper div{ width:300px; height:100%; position: absolute; overflow:hidden; background: transparent; top:0; transition:.8s; } .block_1{ left:0%; } .block_2{ left:-30%; } img{ position:absolute; top:0; left:0; display:block; width:300px; height:180px; position:absolute; transform-origin:top right; transform:skew(-10deg); } /* .wrapper:hover div{ left:0; } .left{ left:; } .left1{ } */ .left{ left:-230px; } .right{ left:40px; } .stable{ left:0; } 
 <!DOCTYPE HTML> <html> <head> <title></title> <meta charset="utf-8"/> <link rel="stylesheet" href="style2.css" /> </head> <body> <div class="wrapper"> <div class="block_1"><img src="http://images.forwallpaper.com/files/thumbs/preview/96/969580__green-dress_p.jpg" alt="" /></div> <div class="block_2"><img src="http://programfiles.narod.ru/wallpapers/big/676.jpeg" alt="" /></div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".block_1").hover(function(){ $(this).toggleClass("right"); $(".block_2").toggleClass("left"); }); }); $(document).ready(function(){ $(".block_2").hover(function(){ $(this).toggleClass("stable"); }); }); </script> </body> </html>

That's what I wanted! and without any there ...

  • This is right-wrong ..... wrong because you can reduce the transform: skew from -10 to at least -25 and understand the curvature of actions - Alexey Shimansky
  • Well, then yes, but I will not reduce -10 to -25, it should be in this form, only now I automate it - user33274
  • And some photos you will have in an unnatural pose crooked. I would not call it a good solution. Rather crutch for a solution. - Alexey Shimansky
  • provided that I reduce or increase skew? - user33274
  • one
    Anyway. imkho should all be compensated. If somewhere added skew , then in another place, you need to do the opposite, to align the photo, except when exactly this effect of the photo and was supposed to. But in this case it seems somehow not so .... my opinion that it should be something like this: jsfiddle.net/6ywafvtn - Alexey Shimansky