Last Updated: February 25, 2016
·
393
· ChrisNager

Natural curves

<h1>HAML</h1>


.natural-curves .natural-curves-inner …</code> </pre> Let your bordered outer div</code> determine the background<sup>1</sup> and its border-radius</code><sup>2</sup> will put a natural curve on the inner div</code>. If you set the background of the inner div</code>, you will also need to set its border-radius</code><sup>3</sup> and you will lose your natural curves. <h1>CSS</h1> .natural-curves { border: 0.5em solid; border-radius: 1.5em; /* 2 / background: lightblue; / 1 */ … } .natural-curves-inner { overflow: hidden; /* 3 / / border-radius: 1em; background: burlywood; */ }</code> </pre> Example here: http://codepen.io/ChrisNager/pen/CFjpK

Have a fresh tip? Share with Coderwall community!

Post
Post a tip