css - circle overflowing the container -


i trying make effect on image attached. circle overflowing container css border-radius. it's there not yet right.

circle overflowing container

this code nearest can it.

body {    margin: 0;  }  .bg-border-radius {    margin: 0px;    width: 100%;    height: 200px;    overflow: hidden;    border-radius: 0 0 100% 100%;    background-color: #0080c1;  }
<div class="bg-border-radius"></div>

how can closer what's on image css?

wrap <div> inside another, let's call "wrapper"

<div class="wrapper">     <div class="bg-border-radius"></div> </div>  .wrapper {     width: 100%;     overflow: hidden; } 

now can arange circle like, bigger width 100%. make circle responsive, set border-radius: 50%, height: auto; , padding-top: 150%; <--same width. if move circle margin-top: -120%; , margin-left: -25%; you'll http://jsfiddle.net/qcfo5688/


Comments

Popular posts from this blog

python - Healpy: From Data to Healpix map -

c - Bitwise operation with (signed) enum value -

xslt - Unnest parent nodes by child node -