-8

I need to apply CSS codes to buttons, divs, paragraphs, etc. making responsive curved sides that shrinks and expands automatically according to the content and doesn't get blurred.

I'd prefer a style to apply on as many elements as possible with minimum changes (like color and padding).

Using backgroud-image property or SVG isn't preferred.

Result-like elements enter image description here

smyslov
  • 1,279
  • 1
  • 8
  • 29
Abdullah Abolwafa
  • 11
  • 2

1 Answers1

1

Try something like this.

This is a close implementation of what you are trying to achieve

https://jsfiddle.net/rahulSlash/qva79at5/

The html code is as follows

<html>

  <body>

    <div class="blue">
      <div class="white">
      </div>
    </div>

  </body>

</html>

And CSS goes:

.blue {
  height: 175px;
  width: 300px;
  background-color: #005999;
  border-radius: 40%/20%;
  position: relative;
  margin-left: 100px;
}

.white {
  position: absolute;
  height: 75px;
  width: 100px;
  background-color: white;
  left: -50px;
  top: 50px;
  border-radius: 40%/25%;
  box-shadow: -5px 0px 10px -2px #aaaaaa;
}
Rahul Gupta
  • 40
  • 4