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