Is het mogelijk om een cirkel te tekenen met alleen css, wat in de meeste browsers (IE,Mozilla,Safari) werkt?
Antwoord 1, autoriteit 100%
Je zou een .before kunnen gebruiken met een inhoud met een unicode-symbool voor een cirkel (25CF).
.circle:before {
content: ' \25CF';
font-size: 200px;
}<span class="circle"></span>Antwoord 2, autoriteit 96%
Ja, teken een kader en geef het een randradius die de helft van de breedte van het kader is:
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
}
Werkende demo:
Antwoord 3, autoriteit 29%
- Maak een div met een vaste hoogte en breedte (gebruik dus voor een cirkel dezelfde hoogte en breedte) en vorm een vierkant
- voeg een
border-radiusvan 50%toe waardoor het een cirkelvormige vorm krijgt. (opmerking: er is geen voorvoegsel vereist voor een lange tijd) - Je kunt dan spelen met
background-color/ verlopen / (zelfspseudo elements) om zoiets als dit te maken:
.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);
}<div class="sphere red"></div>
<div class="sphere green"></div>
<div class="sphere blue"></div>
<div class="sphere yellow"></div>
<div class="sphere"></div>Antwoord 4, autoriteit 8%
Brandradius is een goede optie, als je worstelt met oude IE-versies, probeer dan HTML-codes
•
en gebruik css om van kleur te veranderen. Uitgang:
•
Antwoord 5, autoriteit 6%
Dit werkt in alle browsers
#circle {
background: #f00;
width: 200px;
height: 200px;
border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
}
Antwoord 6, autoriteit 5%
yup.. hier is mijn code:
<style>
.circle{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue
}
</style>
<div class="circle">
</div>