Jak zrobić okrąg w CSS? Chodzi o coś takiego jak na obrazku poniżej. Wiem, że powinno się to składać z 2 kół(mniejsze i większe), jednak nie wiem jak to zrobić.
Umiem zrobić zewnętrzne:
.circle{background-color: #ffff00; width: 100px; height: 100px; border-radius: 50px;}
Pomoże ktoś?
http://jsbin.com/datibokaco/edit?html,css,output
.circle {
width: 100px;
height: 100px;
background: red;
position: relative;
border-radius: 50%;
}
.circle::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: white;
border-radius: 50%;
transform: scale(0.8);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="circle"></div>
</body>
</html>
A co zrobić, żebym mógł wpisać jakiś tekst do tego okręgu, żeby ten wewnętrzny się nie przesuwał? Na przykład:
<div class="circle">Tekst</div>
Trzebabyło od tego zacząć
Można np tak
http://jsbin.com/teceterujo/edit?html,css,output
.circle {
width: 100px;
height: 100px;
background: white;
position: relative;
border-radius: 50%;
text-align: center;
box-shadow: 0 0 0 5px red, 0 0 0 10px green, 0 0 0 15px blue, 0 0 0 20px gold;
}
<div class="circle">
<br>
Lorem ipsum dolor sit amet</div>
To jak sobie wypozycjonujesz tekst zostawię już tobie
Tylko właśnie mi chodzi o sam wyśrodkowanie tekstu w tym okręgu.
Pomoże ktoś wyśrodkować tekst w kole?
Łap http://jsbin.com/harowedero/edit?html,css,output okrąg zrobiłem zwykły ale ze środkowaniem chodzi o chodzi o 2 divy jak mają display:table* to działa vertical-align.
@złoty Kaczor - a nie możesz zrobić po prostu background-image dla diva, wyświetlić go jako tabelę i wyśrodkować tekst? Bo to co pokazałeś w pierwszym poście wygląda strasznie chamsko - nie dość, że te koła leżą mimośrodowo, to jeszcze rysowane są bez antyaliasingu; Chyba że koniecznie tak musi być;
W razie czego w załączniku masz równy okrąg z wygładzonymi krawędziami.
Czy chodzilo o cos takiego: http://jsfiddle.net/2sh6p7bf/?