How to Create Uneven Rounded Sides on a Div

How to create uneven rounded sides on a div?

You can consider clip-path

.box {
  height: 200px;
  width: 200px;
  background: blue;
  clip-path: circle(75% at 65% 10%);
}

<div class="box">

</div>

How do I re-create this shape in html & css?

Here I have created a transparent background circle and inner colored div with absolute position, so inner div gets cropped(overflow:hidden) by the outer circle.
You can always adjust the dimensions to get the different shapes around.

drop-shadow filter function creates a shadow that conforms to the shape (alpha channel) of the image itself

.outer {
  width: 10rem;
  height: 10rem;
  background: transparent;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  filter: drop-shadow(2px 0 2px #444);
}

.inner {
  width: 5rem;
  height: 5rem;
  background: #b63689;
  position: absolute;
  top: 50%;
  right:0;
  transform: translateY(-50%);
  border-radius: 5px;
}

<div class="outer">
<div class="inner">
</div>
</div>

CSS: Rounded effect

Just change px for %: border-radius: 0px 0px 50% 500%;:

body {
  height: 100vh;
  width: 100%;
}

#oval {
  position: relative;
  width: 100%;
  height: 100px;
  background: #ffffff;
  border-radius: 0px 0px 50% 500%;
}

<div style="width: 100%; height: 100px; background-color: #30393b">
  <div id="oval" />
</div>
<div style="width: 100%; height: 100px; background-color: #30393b" />

How to shape a div corner in css

You can hack using multiple elements like this:

.d1 {  width: 100px;  height: 100px;  background-color: #00f;}
.wrapper {  width: 100px;  height: 20px;  background-color: #fff;  margin-top: -20px;}
.d2 {  width: 100%;  height: 100%;  border-radius: 50%;  background-color: #00f;}
.wrapper2 {  width: 100px;  height: 10px;  background-color: #00f;  margin-top: -20px;  position: absolute;}

<div class="d1"></div><div class="wrapper">  <div class="d2"></div></div><div class="wrapper2"></div>

How to obtain a slanted-curve for my div? Like one shown below

Perhaps clip-path property might work for you.....

.container {
  background: #f6eee0;
  clip-path: polygon(0 10%, 100% -2%, 100% 100%, 0 100%);
  height: 80vh;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container"></div>
  </body>
</html>

Having problem making image a certain shape with css

You can use css clipping masks to cut the image into shape.

clip-path: circle(60% at 30% 30%);

Code result

If you need help creating the mask, use clippy.

How to Create Uneven Rounded Sides on a Div