CSS'de iki eş merkezli daire oluşturmak istiyorum. İç kısım, dış tarafa, örn. % 50. Bu daireler duyarlı olmalı, tüm ekranlar için uygun şekilde ölçeklendirilmelidir.CSS - Eş merkezli daireler
Bunu nasıl yapabilirim? Pozisyonu kullanmamayı tercih ederim: mutlak, javascript veya jQuery. Bence mümkün olmalı.
Teşekkürler!
Ah ... svg yardımcı olabilir? Gerekirse 's elemanları üzerindeki CSS kullanabilirsiniz, ancak ben yapabileceğiniz düşünüyorum sıkı ve basit:
<!DOCTYPE html >
<html>
<head>
<title> Bla! </title>
</head>
<body>
<svg>
<circle cx="80" cy="80" r="40" fill='red' stroke-width="20" stroke='black'/ >
</svg>
</body>
</html>
güzel bir. CSS grafikleri için daha iyi bir alternatif gibi görünüyor. Tarayıcı desteği oldukça iyi görünüyor –
#outer {
width: 100%;
height: 100%;
margin: auto;
border-radius: 50%;
background: black;
}
#inner {
width: 50%;
height: 50%;
background: white;
border-radius: 50%;
position: relative;
top: 25%;
left: 25%;
}
BT duyarlı, ancak bazen bir elips. Her zaman bu şekilde bir daire yapın http://jsfiddle.net/mG3KJ/2/ – vals
Çok güzel, ama iç CSS yüzdesini ayarlamak için kolay bir yol var mı? Şimdi her zaman 50. Ben buna ihtiyacım olacak. % 70,% 75 ile .. – user3103099
@ user3103099 Ne demek istiyorsun? Yüzdeyi kolayca değiştirebilirsiniz? –
Saf CSS:
#container {
position: relative;
width: 100%;
padding-bottom: 100%;
}
#circle {
position: absolute;
width: 50%;
height: 50%;
background-color: #000000;
border-radius: 50%;
}
#small-circle{
margin-top: 25%;
margin-left: 25%;
position: absolute;
width: 50%;
height: 50%;
background-color: #e5e5e5;
border-radius: 50%;
}
Ve HTML :
<div id="container">
<div id="circle">
<div id="small-circle">
</div>
</div>
</div>
Bkz. Demo
"Düzgün ölçeklendirme" nasıl yapılacağını belirtebilir misiniz? Ne ile ilişkili olarak ölçeklenirler? – Guffa
Çevrelerin ne olması gerektiği konusunda herhangi bir kısıtlama var mı, yoksa bu konuda tam bir özgürlük var mı? (görüntü, gerçekten büyük sınır yarıçaplı dikdörtgenler, bir arka plan görüntüsü ile div, vb) – Josiah
İç dairenin konumu mutlak ise bu kolaydır. Neden onu kullanmadın? (Komut dosyası kullanmak istemediğimi anlayabiliyorum, ancak pozisyon hakkında bir argüman göremiyorum ...) – vals