0

I am newbie in css world and I am trying to make responsive design like this using bootstrap,css and html5.

enter image description here

but ended up like this. enter image description here

how to create same curve in div displaying in image 1? Note : Red color in second image is for better explanation.I have to apply white color anyway

kandarp
  • 333
  • 5
  • 13
  • 1
    If it were me, I would use an image that was attached to the `:after` and `:before` or do something like http://jsfiddle.net/webtiki/ftw7d5ap/ (http://stackoverflow.com/a/25915415/3739498) – Aibrean Aug 28 '16 at 12:22

3 Answers3

1

You should use percentage to define the border-radius, in this way the curve will look like the one you want.

border-radius: 100%

http://codepen.io/FezVrasta/pen/XKvkJX?editors=1100

Fez Vrasta
  • 14,110
  • 21
  • 98
  • 160
1

To get curved edges use border-radius, the background can be achieved with linear-gradient

jsfiddle: https://jsfiddle.net/ojhcbepz/

html, body {
  height: 100%;
}
div.outer {
  width: 600px;
  height: 250px;
  background: linear-gradient(to bottom,blue 50%,red 0px);
  padding: 20px 0;
  overflow: hidden;
}
div.inner {
  height: 100%;
  border-radius: 50%;
  background: white;
  margin: 0 -50px;
}
<div class="outer">
  <div class="inner">
  </div>
</div>
pol
  • 2,641
  • 10
  • 16
0

well a simple solution maybe... use a small red dot image and repeat it in outer div and inner div has border-radius: 50%

<div style="background-image: red url("http://i.imgur.com/dXis68u.png") repeat;"> 

    <div style="background-color: white; border-radius: 50%; text-align:center;" >
         ABCDEFGH
    </div>
</div>

(You can add two

's of height as you want to get those top and bottom borders)

Mahek Shah
  • 1
  • 2