Как сделать адаптивный круг на CSS?

Иногда, при создании адаптивных сайтов, возникает необходимость придать адаптивности круглым блокам. С изображениями проблем, конечно же не возникает. Но блоки… Особенно, если внутри есть какой-то контент. А если вы не знаете сколько и какой контент будет внутри, то это становится настоящей головной болью. Обычно большинство прибегает к помощи javascript. Вычисляют ширину, присваивают высоту. Но на самом деле с помощью небольшого трюка можно легко сделать круги адаптивными на CSS. Сейчас я расскажу как.

Для начала рассмотрим html-структуру:

<div class="circle">
	<p><span>Количество текста в кругах...</span></p>
</div>

<div class="circle">
	<p><span>...мы не знаем.</span></p>
</div>

<div class="circle">
	<p><span>Здесь может быть одно слово, а может быть целый параграф</span></p>
</div>

Что же нам нужно сделать? Для начала чуть оформим блоки стилями:

.circle{
	border: 3px solid #000;
	display: inline-block;
	float: left;
	width: 30%;
	text-align: center;
	border-radius: 100%;
	background: #cecece;
	max-width: 350px;
	margin: 2%;
}

Теперь основное: дочернему элементу указываем высоту в ноль пикселей, а саму высоту формируем padding-ом:

.circle p{
	display: block;
	height: 0;
	margin: 0;
	padding: 50% 20%;
}

Последнее, что осталось, — выровнять контент:

.circle p span{
	display: block;
	transform: translateY(-50%);
}

И всё! Посмотреть результат можно на этой странице.

comments powered by HyperComments

Автор

webbeaver

webbeaver

Верстаю, читаю, учусь