How to create curved-sided rectangles (as in picture) using CSS and HTML?

179 Views Asked by Abdullah Abolwafa At 17 October 2017 at 09:06

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

Original Q&A

There are 1 best solutions below

Rahul Gupta On 17 October 2017 at 11:54

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;
}

How to create curved-sided rectangles (as in picture) using CSS and HTML?

There are 1 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in SHAPES

Related Questions in CURVES

Trending Questions

Popular # Hahtags

Popular Questions