Menu
It should just basically be an outline of the square or circle - that I can style accordingly (i.e. change the color to whatever I want, change the thickness of the border, etc.)
I would like to apply that circle or square over something else (like an image or something) and the middle part should be hollowed out, so you can see the image beneath the square or circle.
I would prefer for it to be mainly CSS + HTML.
217
Creating an empty circle with CSS To create an empty circle first of all add an empty <div> element. Use CSS border-radius: 50% to make the div element circular. Additionally set the height, width and border of <div> element.
Making Circles Now, to turn your square into a circle, set the border-radius property on your element to exactly half of your element's total width or height. My image's size is 256 pixels on each edge and my border has a 10 pixel width. Your once square content is now displays as a circle!
To create a circular div in CSS, follow the same steps as above. Add a div in HTML. Then, set the width and height of the element to the same value. Finally, specify the value of the border-radius property to 50%.
Put the text inside a header or <p> inside the <div></div> Then it will be inside the box.
Try This
div.circle { -moz-border-radius: 50px/50px; -webkit-border-radius: 50px 50px; border-radius: 50px/50px; border: solid 21px #f00; width: 50px; height: 50px; } div.square { border: solid 21px #f0f; width: 50px; height: 50px; }<div class="circle"> <img/> </div> <hr/> <div class="square"> <img/> </div>More here
50
You can use special characters to make lots of shapes. Examples: http://jsfiddle.net/martlark/jWh2N/2/
<table> <tr> <td>hollow square</td> <td>□</td> </tr> <tr> <td>solid circle</td> <td>•</td> </tr> <tr> <td>open circle</td> <td>๐</td> </tr> </table>
Many more can be found here: HTML Special Characters
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
