Tôi muốn tạo hai vòng tròn đồng tâm trong CSS. Phần bên trong có chiều rộng được chỉ định được biên dịch theo chiều rộng bên ngoài, ví dụ: 50%. Các vòng kết nối đó phải đáp ứng, chúng phải được mở rộng cho tất cả các màn hình.CSS - Vòng tròn đồng tâm
Tôi làm cách nào để thực hiện việc này? Tôi không thích sử dụng vị trí: tuyệt đối, javascript hoặc jQuery. Tôi nghĩ rằng nó sẽ là có thể.
Cảm ơn!
Ah ... svg có thể trợ giúp? Bạn có thể sử dụng CSS trên các yếu tố của nó nếu cần thiết, nhưng tôi nghĩ bạn có thể làm điều đó nghiêm ngặt và đơn giản:
<!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>
phần tử đẹp. Có vẻ như là một lựa chọn tốt hơn cho đồ họa CSS. Và hỗ trợ trình duyệt trông khá tốt –
#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%;
}
CNTT đáp ứng, nhưng đôi khi nó là hình elip. Làm cho nó luôn luôn là một vòng tròn theo cách này http://jsfiddle.net/mG3KJ/2/ – vals
Rất đẹp, nhưng có một cách dễ dàng để thiết lập tỷ lệ phần trăm của CSS bên trong? Bây giờ nó luôn luôn là 50. Tôi sẽ cần f.e. một với 70%, 75%, .. – user3103099
@ user3103099 Ý của bạn là gì? Bạn chỉ có thể thay đổi tỷ lệ phần trăm? –
tinh khiết 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%;
}
Và HTML :
<div id="container">
<div id="circle">
<div id="small-circle">
</div>
</div>
</div>
Xem Demo
Bạn có thể chỉ định cách chúng nên "mở rộng đúng cách" không? Những gì họ sẽ quy mô liên quan đến? – Guffa
Bạn có bất kỳ hạn chế nào về vòng kết nối nên không, hoặc có tự do hoàn toàn về khía cạnh đó không? (hình ảnh, hình chữ nhật với bán kính đường viền thực sự lớn, div với hình nền, v.v.) – Josiah
Thật dễ dàng nếu vòng tròn bên trong có vị trí tuyệt đối. Tại sao bạn không sử dụng nó? (Tôi có thể không muốn sử dụng kịch bản, nhưng tôi không thấy tranh luận về vị trí ...) – vals