html - Smart background div with circle but what if is background-image -
i have div , span. span circle border added on it. div has simple background , move - top. if background isn't color , background-image how so.
sorry bad english
html
<div id="main"> <span class="circle"></span> <div class="div"> </div> </div>
css
#main { text-align: center; } .circle { background: #298eea; display: inline-block; width: 80px; height: 80px; margin-top: 30px auto; border-radius: 50%; border: 15px solid #f3f5f6 } .div { padding: 80px 80px 60px 80px; background: #282c39; border-radius: 3px; margin-top: -45px; }
checkout jsfiddle
you may use pseudo element , use shadow draw background-color.
#main { text-align: center; } html { background: linear-gradient(45deg, white, gray, gold, purple, gray, white, gray, gold, purple, gray, white, gray, gold, purple, gray, white, gray, gold, purple, gray, white, gray, gold, purple, gray) } .circle { background: #298eea; display: inline-block; position: relative; width: 80px; height: 80px; margin: 15px auto 0; border-radius: 50%; } .div { padding: 80px 80px 60px 80px; border-radius: 3px; overflow: hidden; position: relative; margin-top: -45px; z-index: 1; color:white; } .div:before { content: ''; height: 100px; width: 100px; position: absolute; z-index: -1; top: -50px; left: 0; right: 0; margin: auto; box-shadow: 0 0 0 1000px #282c39; border-radius: 50%; }
<div id="main"> <span class="circle"></span> <div class="div"> test me </div> </div>
Comments
Post a Comment