html неполная рамка
594
07 февраля 2017, 18:54
Подскажите, как можно реализовать в html и css такие полуокружности под фотографиями? Border тут не подойдёт, как я понимаю.
Answer 1
минимум кода
img {
display: block;
width: 200px;
border-radius: 100%;
}
div {
display: inline-block;
width: 200px;
padding: 10px;
border-bottom: 10px solid red;
border-radius: 100%;
border-left: 10px solid transparent;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
}<div>
<img src="http://libymax.ru/wp-content/uploads/2011/10/jobs.jpg">
</div>Answer 2
Для скругленных краев добавьте к диву псевдоклассы before и after:
img {
display: block;
width: 200px;
border-radius: 100%;
}
div {
display: inline-block;
width: 200px;
padding: 10px;
border-bottom: 10px solid red;
border-radius: 100%;
border-left: 10px solid transparent;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
position:relative;
}
div:before,div:after{
content:'';
height:9px;
width:9px;
border-radius:200%;
background-color:red;
position:absolute;
bottom:19px;
}
div:before{left:18px}
div:after{right:18px}<div>
<img src="http://libymax.ru/wp-content/uploads/2011/10/jobs.jpg">
</div>
-
09:21
Основные этапы разработки сайта для стоматологической клиники
-
12:26
-
10:30
-
18:43
Продвижение своими сайтами как стратегия роста и независимости
-
22:46
-
06:18
-
12:23
-
20:41
-
06:31
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 50263 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 31930 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 26236 visits
- Как через css изменить цвет png изображения? 11752 visits
- Blob video url download 11296 visits
- Php curl запрос через прокси с авторизацией 10708 visits
- Работа с captcha vk api 9504 visits
© "hostciti.net" 09.3.2026 | 10:01