Is it possible to draw a circle that will display in most browsers (IE, Mozilla, Safari) using only CSS ?
Translation of the question: Draw Circle using css alone
Answer 1, authority 100%
Well, since the question says “using only CSS”, I will answer this way:
html {
background: white;
}
body {
width: 10em; / * any units are supported, including percent * /
margin: 1em auto;
background: silver;
border-radius: 50%;
}
body :: before {
content: "";
display: inline-block;
vertical-align: middle;
padding-top: 100%;
} Answer 2, authority 95%
- Create a
divwith the same height and width, thus forming
square (use the same values for a circle). - Add a
border-radius50% to make the square round in shape. - Then you can play with background-colors / gradients / (even with
pseudo-elements) to create something like this:
. red {
background-color: red;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.sphere {
height: 200px;
width: 200px;
border-radius: 50%;
text-align: center;
vertical-align: middle;
font-size: 500%;
position: relative;
box-shadow: inset -10px -10px 100px # 000, 10px 10px 20px black, inset 0px 0px 10px black;
display: inline-block;
margin: 5%;
}
.sphere :: after {
background-color: rgba (255, 255, 255, 0.3);
content: '';
height: 45%;
width: 12%;
position: absolute;
top: 4%;
left: 15%;
border-radius: 50%;
transform: rotate (40deg);
} & lt; div class = "sphere red" & gt; & lt; / div & gt;
& lt; div class = "sphere green" & gt; & lt; / div & gt;
& lt; div class = "sphere blue" & gt; & lt; / div & gt;
& lt; div class = "sphere yellow" & gt; & lt; / div & gt;
& lt; div class = "sphere" & gt; & lt; / div & gt; Answer 3, authority 68%
And I liked this answer , it’s the only one that supports IE8- since it doesn’t use border-radius :
Instead, a circle symbol is inserted, with the unicode number 25WITHF :
. circle: before {
content: '\ 25CF';
font-size: 200px;
} & lt; span class = "circle" & gt; & lt; / span & gt; Answer 4, authority 37%
I think everything is clear with the code:
. circle {
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
} & lt; div class = "circle" & gt; & lt; / div & gt; Answer 5, authority 32%
Here is a mixin for creating a circle
@ mixin circle ($ width, $ color) {
width: $ width;
height: $ width;
background: $ color;
border-radius: $ width / 2;
}
.circle {
@include circle (200px, # 123);
}
Usage –
& lt; div class = "circle" & gt; & lt; / div & gt;
Answer 6, authority 32%
There is also an option using a circular gradient:
. circle {
width: 200px;
height: 200px;
background-image: radial-gradient (black 0%, black 70%, transparent 70%);
} & lt; div class = "circle" & gt; & lt; / div & gt; Programmers, Start Your Engines!
Why spend time searching for the correct question and then entering your answer when you can find it in a second? That's what CompuTicket is all about! Here you'll find thousands of questions and answers from hundreds of computer languages.