css - circle overflowing the container -
i trying make effect on image attached. circle overflowing container css border-radius. it's there not yet right.
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
Post a Comment