Does anyone have any thoughts on how to use html/css to achieve an effect as per the screenshot? I need to display the image as a background within a slanted container (10deg) with fully visible border radius at each corner, with the image remaining level.

I have tried slanting the container and un-slanting the image.

 <style>
    .slanted-container {
      transform: rotate(-10deg);
      overflow: hidden;
      display: inline-block;
      height:400px;
      width:600px;
      border-radius: 50px;
    }
    
    .slanted-container .image {
      transform: rotate(10deg);
      display: block;
      width: 100%;
      max-width:600px;
      height:100%;
      background-size:cover;
background-position:center;
      background-image:url('-1280x720.png');
    }
 </style>

 <div class="slanted-container">
   <div class="image">
   </div>
</div>

But I can't avoid chopping off the edges and losing the border radius corners. Any help hugely appreciated - this really needs to be a flexible solution that can apply to multiple images within flexbox containers if possible.

Does anyone have any thoughts on how to use html/css to achieve an effect as per the screenshot? I need to display the image as a background within a slanted container (10deg) with fully visible border radius at each corner, with the image remaining level.

I have tried slanting the container and un-slanting the image.

 <style>
    .slanted-container {
      transform: rotate(-10deg);
      overflow: hidden;
      display: inline-block;
      height:400px;
      width:600px;
      border-radius: 50px;
    }
    
    .slanted-container .image {
      transform: rotate(10deg);
      display: block;
      width: 100%;
      max-width:600px;
      height:100%;
      background-size:cover;
background-position:center;
      background-image:url('https://images.ctfassets/ihx0a8chifpc/GTlzd4xkx4LmWsG1Kw1BB/ad1834111245e6ee1da4372f1eb5876c/placeholder-1280x720.png');
    }
 </style>

 <div class="slanted-container">
   <div class="image">
   </div>
</div>

But I can't avoid chopping off the edges and losing the border radius corners. Any help hugely appreciated - this really needs to be a flexible solution that can apply to multiple images within flexbox containers if possible.

• html
• css

Share Improve this question Follow asked Mar 2 at 10:24 Tom MitchellTom Mitchell 9511 silver badge1010 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 1

Use a skew transformation:

.box {
  display: inline-grid;
  place-items: center;
  border-radius: 20px;
  overflow: hidden;
  margin: 50px;
  transform: skewy(-10deg);
}

img {
  width: 300px;
  transform: skewy(10deg); /* the opposite value here */
  margin: -50px 0; /* you may need to adjust this as well */
}

<div class="box"><img src="https://picsum.photos/id/1069/800/800"></div>

You can use skew as suggested by Temani Afif but if you want to use background image rather than an img then you could put it onto a before pseudo element, 'unskewing that' so the image appears upright.

You have to make the background slightly larger so that it covers the skewed div, this snippet adds 20%, but the amount can be made to depend on the amount of skew if that is important.

The snippet uses an 'upright' image (a lighthouse) so you can be sure it is showing with correct (ie non) rotation.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.box {
  border-radius: 20px;
  transform: skewy(-10deg);
  position: relative;
  width: 50vmin;
  height: 50vmin;
  overflow: hidden;
}

.box::before {
  border-radius: 20px;
  content: '';
  width: 120%;
  height: 120%;
  transform: skewy(10deg);
  top: -10%;
  left: -10%;
  background-image: url(https://picsum.photos/id/870/1024/768);
  background-size: cover;
  background-position: center;
  position: absolute;
}

<div class="box"></div>