Question 244215 in CSS Question posted in
Some basic documentation can be found here.

How can i achieve an image clip rounded with css

I have this design that i need to replicate, i am using swiper to display the carousel, i have the full images, i need the corners to be rounded like this:

curved images

i tried creating an a div that is position absolute, but it covered the carousel and i couldn’t swipe left and right.

how can i achieve a curve like this one in the image, the purple curve using tailwind or normal css.

thank you in advance

Tags:

2

Answers


  1. 0

    Use clip-path + ellipse.

    the syntax of ellipse is:
    [radius-x] [radius-y] at [position-x] [position-y]

    if you use as position-y 0%, it will place the curve at the bottom:

    img {
  width: 100%;
  clip-path: ellipse(100% 100% at 50% 0%);
}
    <img src="https://via.placeholder.com/500x100.jpg">
    Login or Signup to reply.
  2. 0

    You could use border-radius for this.

    Basically you could add a class to the div and then tweak the radius as needed. For example:

    .curve {
  position: relative;
  background: #1b1464;
  height: 50px;
  transform: scaleY(-1); /* flip vertically */
}

.curve::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20%; /* tweak this as needed */
  border-top-left-radius: 50% 100%; /* tweak 50% value */
  border-top-right-radius: 50% 100%;
  background: #fff;
}
    <div class="curve"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search