How to make css 'snail'?

Question

I have an image that I would like to display as a circle with ( border-radius:50% ), and on the same line I would like to have text with a given width and background. I would not like to hard code any values. What is the best way to accomplish this?

Here is a picture

fiddle

 <div class="header"> <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/> <p class="headingText">Hello</p> </div> 

 .i { width: 80px; height: 80px; border-radius: 50%; } .headingText { color: white; background: black; display: inline-block; width: 350px; padding-top: 10px; padding-bottom: 10px; text-align: center; } 

Answer 1

You can try something like this:

 .header { padding-top:26px; padding-left:40px; position:relative; } .i { position:absolute; width:80px; height:80px; border-radius:50%; top:0; left:0; } .headingText { color:white; background:black; display:inline-block; width:350px; padding-top:10px; padding-bottom:10px; text-align:center; } 

Answer 2

Using pseudo-classes and absolute positioning, you can get the desired effect.

The answer below uses your existing HTML, so you don’t need to change anything and just change your CSS.

You can add a few more additions to the text to make it a little more spaced, if necessary, and the background should sort.

 .header { position: relative; display: inline-block; margin: 30px; overflow: visible; } .header img.i { width: 80px; height: 80px; border-radius: 50%; position: absolute; bottom: 16px; left: -40px; z-index: 1; overflow: hidden; border: 3px solid black; } .header p.headingText { padding: 16px 32px 16px 80px; color: black; border: 3px solid black; } 

 <div class="header"> <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg" /> <p class="headingText">Hello</p> </div> 

Answer 3

instead use a block block with a negative margin up (the size of the semicircle is half the indentation) and the edge on the left (the size of the semicircle). Just change:

 .headingText { /*display: inline-block;*/ display: block; margin-top: -45px; margin-left: 40px; } 

Example script: https://jsfiddle.net/c67dchhv/

Answer 4

Just add position: absolute to class i , then adjust the headingtext field:

HTML:

 <div class="header"> <img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/> <p class="headingText">Hello</p> </div> 

CSS

 .i { width:80px; height:80px; border-radius:50%; position: absolute; } .headingText { color:white; background:black; display:inline-block; width:350px; padding-top:10px; padding-bottom:10px; text-align:center; margin: 40px 0 0 37px; } 

Fiddle

Answer 5

just do .header class position:relative; , if you want to define any height and width, you can, .i class position:absolute; give a margin to the .headingtext class https://jsfiddle.net/hamzanisar/aphzeyyt/ maybe this will be useful for you.