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.
This question is related to
html
css
geometry
css-shapes
Try This
div.circle {_x000D_
-moz-border-radius: 50px/50px;_x000D_
-webkit-border-radius: 50px 50px;_x000D_
border-radius: 50px/50px;_x000D_
border: solid 21px #f00;_x000D_
width: 50px;_x000D_
height: 50px;_x000D_
}_x000D_
_x000D_
div.square {_x000D_
border: solid 21px #f0f;_x000D_
width: 50px;_x000D_
height: 50px;_x000D_
}
_x000D_
<div class="circle">_x000D_
<img/>_x000D_
</div>_x000D_
<hr/>_x000D_
<div class="square">_x000D_
<img/>_x000D_
</div>
_x000D_
i don't know of a simple css(2.1 standard)-only solution for circles, but for squares you can do easily:
.squared {
border: 2x solid black;
}
then, use the following html code:
<img src="…" alt="an image " class="squared" />
Shortly after finding this questions I found these examples on CSS Tricks: http://css-tricks.com/examples/ShapesOfCSS/
Copied so you don't have to click
.square {_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background: red;_x000D_
}_x000D_
.circle {_x000D_
width: 100px;_x000D_
height: 100px;_x000D_
background: red;_x000D_
-moz-border-radius: 50px;_x000D_
-webkit-border-radius: 50px;_x000D_
border-radius: 50px;_x000D_
}_x000D_
/* Cleaner, but slightly less support: use "50%" as value */
_x000D_
<div class="square"></div>_x000D_
<div class="circle"></div>
_x000D_
There are many other shape examples in the above link, but you will have to test for browser compatibility.
You can use special characters to make lots of shapes. Examples: http://jsfiddle.net/martlark/jWh2N/2/
<table>_x000D_
<tr>_x000D_
<td>hollow square</td>_x000D_
<td>□</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>solid circle</td>_x000D_
<td>•</td>_x000D_
</tr>_x000D_
<tr>_x000D_
<td>open circle</td>_x000D_
<td>๐</td>_x000D_
</tr>_x000D_
_x000D_
</table>
_x000D_
Many more can be found here: HTML Special Characters
To my knowledge there is no cross-browser compatible way to make a circle with CSS & HTML only.
For the square I guess you could make a div with a border and a z-index higher than what you are putting it over. I don't understand why you would need to do this, when you could just put a border on the image or "something" itself.
If anyone else knows how to make a circle that is cross browser compatible with CSS & HTML only, I would love to hear about it!
@Caspar Kleijne border-radius does not work in IE8 or below, not sure about 9.
In case of circle all you need is one div, but in case of hollow square you need to have 2 divs. The divs are having a display of inline-block which you can change accordingly. Live Codepen link: Click Me
In case of circle all you need to change is the border properties and the dimensions(width and height) of circle. If you want to change color just change the border color of hollow-circle.
In case of the square background-color property needs to be changed depending upon the background of page or the element upon which you want to place the hollow-square. Always keep the inner-circle dimension small as compared to the hollow-square. If you want to change color just change the background-color of hollow-square. The inner-circle is centered upon the hollow-square using the position, top, left, transform properties just don't mess with them.
Code is as follows:
/* CSS Code */_x000D_
_x000D_
.hollow-circle {_x000D_
width: 4rem;_x000D_
height: 4rem;_x000D_
background-color: transparent;_x000D_
border-radius: 50%;_x000D_
display: inline-block;_x000D_
_x000D_
/* Use this */_x000D_
border-color: black;_x000D_
border-width: 5px;_x000D_
border-style: solid;_x000D_
/* or */_x000D_
/* Shorthand Property */_x000D_
/* border: 5px solid #000; */_x000D_
}_x000D_
_x000D_
.hollow-square {_x000D_
position: relative;_x000D_
width: 4rem;_x000D_
height: 4rem;_x000D_
display: inline-block;_x000D_
background-color: black;_x000D_
}_x000D_
_x000D_
.inner-circle {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
left: 50%;_x000D_
transform: translate(-50%, -50%);_x000D_
width: 3rem;_x000D_
height: 3rem;_x000D_
border-radius: 50%;_x000D_
background-color: white;_x000D_
}
_x000D_
<!-- HTML Code -->_x000D_
_x000D_
<div class="hollow-circle">_x000D_
</div>_x000D_
_x000D_
<br/><br/><br/>_x000D_
_x000D_
<div class="hollow-square">_x000D_
<div class="inner-circle"></div>_x000D_
</div>
_x000D_
Circle Time! :) Easy way of making a circle with a hollow center : use border-radius, give the element a border and no background so you can see through it :
div {_x000D_
display: inline-block;_x000D_
margin-left: 5px;_x000D_
height: 100px;_x000D_
border-radius: 100%;_x000D_
width:100px;_x000D_
border:solid black 2px;_x000D_
}_x000D_
_x000D_
body{_x000D_
background:url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');_x000D_
background-size:cover;_x000D_
}
_x000D_
<div></div>
_x000D_
If you want your div to keep it's circular shape even if you change its width/height (using js for instance) set the radius to 50%. Example: css:
.circle {
border-radius: 50%/50%;
width: 50px;
height: 50px;
background: black;
}
html:
<div class="circle"></div>
Source: Stackoverflow.com