1

I'm trying to create a responsive image slider for a project I'm working at the moment.

The challenge is to shape the image slider with a particular shape from the brand. It's basically a 'rectangle' with a corner cut and rounded border radius.

Here is an animated example of what I'm trying to achieve

As you can see on the snippet below, I have tried to re-create it using clip-path: path() method, however, the size is static and not responsive at all.

HTML/CSS Example:

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

.slider-container{
   width: 90vw;
   height: 600px;
   background: #A490FF;
   clip-path: path('M0 30C0 13.4315 13.4315 0 30 0H1625C1641.57 0 1655 13.4315 1655 30V548C1655 564.569 1641.57 578 1625 578H333.043C324.531 578 316.201 575.531 309.064 570.892L9.10025 375.915C3.42439 372.226 0 365.916 0 359.146V30Z');
}
<section>
  <div class="slider-container"></div>
</section>

Thanks in advance for your help :)

Dzainr

dzainr
  • 11
  • 3
  • Can you show us what ou have tried, see https://stackoverflow.com/help/minimal-reproducible-example In particular I don’t understand ‘rough and skewed edges’ – A Haworth Jan 10 '23 at 12:28
  • What are the constraints on that rectangle. Does it always have the same aspect ratio? – A Haworth Jan 10 '23 at 12:31
  • @Ahaworth - Apologies, I'm new to stckoverflow. I have tried all the clip path generator, they produce an irregular pentagon alright. However, the corners/nodes of the shape is square, not rounded and border radius doesn't work either. It only works partially, but not on the bottom left corners. Here is an example what I have tried and failed: https://codepen.io/rcoradello/pen/RwBpxJL – dzainr Jan 10 '23 at 13:00
  • https://css-generators.com/custom-corners/ – Temani Afif Jan 10 '23 at 13:14
  • Hey @TemaniAfif, thanks for your comment. I have tried that website as well, but it doesn't work with rounded corners :/ – dzainr Jan 10 '23 at 13:57
  • check this: https://stackoverflow.com/a/65504085/8620333 – Temani Afif Jan 10 '23 at 14:02
  • It looks as though the aspect ratio of the rectangle isn’t fixed. So could you describe what the constraints are? Does that cut out bit start at a fixed place (defined as % ?) down the left hand side and is it an isosceles triangle? – A Haworth Jan 10 '23 at 14:09

0 Answers0