Кто нибудь с таки сталкивался? Нужно в 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);
}
Комментариев нет:
Отправить комментарий