Страницы

Поиск по вопросам

вторник, 26 ноября 2019 г.

Как сделать на CSS колечки на линии


Кто нибудь с таки сталкивался? Нужно в landing page реализовать три колечка на линии. 
    


Ответы

Ответ 1



Пример * { padding: 0; margin: 0; box-sizing: border-box; } .circles { border-bottom: 20px solid #00878B; } .circle { position: relative; border: 20px solid #00878B; width: 150px; height: 150px; margin: 0 auto -20px auto; border-radius: 50%; box-shadow: 0 3px 5px rgba(0, 0, 0, .2); } .circle:after { content: ''; position: absolute; bottom: -20px; right: 0; width: 50px; height: 20px; background: #00878B; box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, .5); }


Ответ 2



Вариант на градиентах. В этом случае нет тени на белом фоне. .circle { width: 200px; height: 200px; background-color: darkcyan; background-image: linear-gradient(90deg, darkcyan 50%, transparent 50%), linear-gradient(transparent 70%, rgba(0, 0, 0, .2) 85%, transparent 85%); background-repeat: norepeat-x; border-radius: 100%; position: relative; } .circle::after { content: ''; background-color: darkcyan; width: 50%; height: 15%; position: absolute; bottom: 0; left: 50%; } .circle::before { content: ''; background-color: darkcyan; background-image: linear-gradient(-90deg, rgba(0, 0, 0, .2) 30%, transparent 85%); width: 50%; height: 15%; position: absolute; bottom: 0; left: 0; z-index: -100; } .content { width: 70%; height: 70%; background-color: white; border-radius: 100%; position: absolute; left: 15%; top: 15%; }


Ответ 3



Основано на предыдущем ответе soledar10. Для автора. 3 колечки * { padding: 0; margin: 0; box-sizing: border-box; } .circles { float: left; width: 100%; border-bottom: 20px solid #00878B; } .circle { position: relative; border: 20px solid #00878B; width: 150px; height: 150px; margin: 0 auto -20px auto; border-radius: 50%; box-shadow: 0 3px 5px rgba(0, 0, 0, .2); float: left; } .circles>.circle:first-child{ margin-left: 50px; } .circles>.circle:nth-child(2){ margin-left: 40px; margin-right: 40px; } .circle:after { content: ''; position: absolute; bottom: -20px; right: 0; width: 50px; height: 20px; background: #00878B; box-shadow: 0 -5px 5px -5px rgba(0, 0, 0, .5); }


Комментариев нет:

Отправить комментарий