Круг | 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>