Create curve and use as slider crop image effect

Question

I'm new in css and I have a simple slider, and I want to add curved effect at the end

Desire curve

So I read about it and I found the easiest solution is to add a curved svg the put inside slider, but how can I add an svg there ?

I tried to create svg curve here but it didn't work.

<svg xmlns="http://www.w3.org/2000/svg" style="fill:#0e4f1f;">
<path d="M -14.73 -1.42 C -1.7 9.78, 8 9.89, 20.9 -1.81">
</svg>

My slider image

#main-slider {
    width: 100%;
    height: 528px;
}

 <img id="main-slider"  src="https://via.placeholder.com/1365x528?text=Slider">

score 1 · Accepted Answer · answered Jul 13 '20 at 05:10

1

Can be done by using this value as border-radius

border-radius: 0% 0% 60% 60% / 0% 0% 20% 20%;

You can play around with the value to achieve different curve radius

#main-slider {
    width: 100%;
    height: 528px;
    border-radius: 0% 0% 60% 60% / 0% 0% 20% 20%;
}

 <img id="main-slider"  src="https://via.placeholder.com/1365x528?text=Slider">

answered Jul 13 '20 at 05:10

Prakhar

I though that values are top,left,bottom, right, but why did you divide it, can you explain that code? – Brian Jul 13 '20 at 05:13
1

Every corner can be given two values which define the radius in two directions. first set of values (horizontal radius) / second set of values (vertical radius) – Prakhar Jul 13 '20 at 05:19

1 Answers1