× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

Concentric circles with CSS

Mar 02, 2015
<p>You can make 3 concentric circles with :</p> <ul> <li>one element</li> <li><code>border-radius:50%;</code> to make the shape round</li> <li>padding and <code>background-clip:content-box;</code> for the white gap between the red and blue circles</li> <li>border for the outer blue circle</li> </ul> <p></p><div class="snippet"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>div{ width:80px; height:80px; border-radius:50%; background-color:#CE1126; background-clip:content-box; padding:40px; border:40px solid #00247D; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre> </div> </div> <p></p> <p>You can also use the approach described in <a href="http://stackoverflow.com/questions/27314373/overlapping-circles-in-css-with-1-div/27314411#27314411">Overlapping circles in CSS with 1 div</a> with multiple box-shadows. </p> <p><em>Note: as <a href="http://stackoverflow.com/users/2606013/harry">Harry</a> pointed out inset box-shadows would be better (no need for margins and enables click/hover all over the shape)</em></p> <p></p><div class="snippet"> <div class="snippet-code"> <pre class="snippet-code-css lang-css prettyprint-override"><code>div { background-color: #CE1126; width: 240px; height: 240px; border-radius: 50%; box-shadow: inset 0 0 0 40px #00247D, inset 0 0 0 80px #fff; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div&gt;&lt;/div&gt;</code></pre> </div> </div> <p></p> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/28646858/Concentric%20circles%20with%20CSS/28647073">Stack Overflow</a>.</p>
comments powered by Disqus