How to achieve a curved ramp effect in css

Question

In the image above you can see how it has a very nice curved effect end to end.

But the image above this text is all I can achieve. This is by using border-radius: 50%; but this just does not give it the same affect.

Not sure if anyone knows if this is possible to do or not?

I was thinking of creating it as an image as that might be easier.

this might help you. https://stackoverflow.com/questions/17202548/wavy-shape-with-css — Ravi, Aug 06 '19 at 08:47
@RV Thanks for this, this does look promising and I will look into that. — Max Loyd, Aug 06 '19 at 08:49

score -1 · Answer 1 · answered Aug 06 '19 at 08:48

-1

.withimg{
 background-color: #000;
 text-align: center;
}

.withimg img {
    border-radius: 50%;
    border: 50px solid #000000;
    margin-bottom: -100px;
}
.belowbox{
 height: 200px;
 width: 100%;
 background-color: #10141d;
}

<div class="withimg">
    <img src="https://picsum.photos/id/237/200" alt="">            
</div>
<div class="belowbox"></div>

answered Aug 06 '19 at 08:48

Bimal Pariyar

257
2
9

This looks nice, but hasn't got the curved affect where the 2 ends connect. – Max Loyd Aug 06 '19 at 08:49

How to achieve a curved ramp effect in css

1 Answers1