Круг | CSS примеры

Опубликовано: 22.08.2018

border-radius : округлить HTML-элемент

Круг получается из квадрата (ширина = высота) с закруглёнными углами. С помощью padding в процентах можно добиться пропорционального изменения высоты и ширины "резинового" блока.

Круглая картинка

<style> .round { border-radius: 50%; } </style> <img src="http://2.bp.blogspot.com/-c4ScvKxvKBs/TkoXOfNQFHI/AAAAAAAACLA/0x_aaffS0t0/s00/background.jpg" alt="На голубом фоне смайлик" width="120" height="120" class="round">

Круглый блок с текстом

Содержимое выходит за границы круга.

Слово1 да слово2 да слово3 да слово4

<style> .round { width: 10em; height: 10em; border: 2px solid red; border-radius: 50%; background: mistyrose; } </style> <div class="round">текст</div>

Содержимое, выходящее за границы круга с overflow: hidden;, невидно.

Слово1 да слово2 да слово3 да слово4

<style> .round { width: 10em; height: 10em; border: 2px solid red; border-radius: 50%; overflow: hidden; background: mistyrose; } </style> <div class="round">текст</div>

clip-path: обрезать HTML-элемент

Содержимое, выходящее за границы контура в clip-path, невидно.

Слово1 да слово2 да слово3 да слово4

<style> .round { width: 10em; height: 10em; border: 2px solid red; clip-path: circle(50% at center center); background: mistyrose; } </style> <div class="round">текст</div>

Слово1 да слово2 да слово3 да слово4

<style> .round { width: 10em; height: 10em; border: 2px solid red; clip-path: circle(2em at 20% 20%); background: mistyrose; } </style> <div class="round">текст</div>

shape-inside: текст в круге

Текст выравнен так, что крайние слова не выходят за границу, обозначенную в shape-inside. Но на момент написания статьи нет поддержки браузерами.

Слово1 да слово2 да слово3 да слово4

<style> .round { width: 10em; height: 10em; border: 2px solid red; border-radius: 50%; shape-inside: circle(50% at center center); background: mistyrose; } </style> <div class="round">текст</div>

Можно установить безопасный отступ, зная формулу, позволяющую найти сторону квадрата через радиус описанной окружности: a = 2R : √ 2

Слово1 да слово2 да слово3 да слово4

<style> .round { width: 10em; height: 10em; border: 2px solid red; border-radius: 50%; padding: 1.4644em; padding: calc((100% - 100% / 1.4142) / 2); box-sizing: border-box; background: mistyrose; } </style> <div class="round">текст</div>

Можно нарисовать символ либо картинку в центре круга

Слово1

<style> .round { width: 10em; height: 10em; border: 2px solid red; border-radius: 50%; line-height: 10em; text-align: center; background: mistyrose; } </style> <div class="round">текст</div>

Когда нужна круглая фоновая картинка.

Слово1 да слово2 да слово3 да слово4

<style> .round { width: 10em; height: 5em; border: 2px solid red; background-color: mistyrose; background-image: radial-gradient(circle closest-corner at 25% 50%, #fff 50%, transparent 50%); } </style> <div class="round">текст</div>

Слово1 да слово2 да слово3 да слово4

<style> .round { width: 10em; height: 5em; border: 2px solid red; background-color: mistyrose; background-image: radial-gradient(circle closest-corner at 25% 50%, #fff 50%, transparent); } </style> <div class="round">текст</div>

radial-gradient в mask: наложить маску на HTML-элемент

Слово1 да слово2 да слово3 да слово4

<style> .round { width: 10em; height: 5em; border: 2px solid red; mask: radial-gradient(circle closest-corner at 25% 50%, #fff 50%, transparent); background: mistyrose; } </style> <div class="round">текст</div>

SVG в background : фоновое круглое изображение

То, что не поддаётся radial-gradient.

Слово1 да слово2 да слово3 да слово4

<style> .round { width: 10em; height: 5em; border: 2px solid red; background-color: mistyrose; background-repeat: no-repeat; background-position: left top; background-size: contain; background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 2 2%22%3E %3Ccircle r=%221%22 cx=%221%22 cy=%221%22 fill=%22%23fff%22/%3E %3C/svg%3E'); } </style> <div class="round">текст</div>
IRC (Internet Relay Chat)
rss