Есть вот такой блок, в центре статичная картинка большая, по бокам располагаются блоки поменьше (солнышко, блин). Как будет правильным сверстать такой блок?
Пробовал использовать translate3d, но подгонять каждый блок это просто ужас, да еще же будет адаптивная версия.
div.advantage{
width:130px;
height:130px;
border-radius:65px;
box-sizing:border-box;
background:yellow;
display:flex;
text-align:center;
align-items:center;
justify-content:center;
}
div.advantage:nth-child(1){
padding-right:155px;
transform:translate3d(55px,-520px,0);
}
div.advantage:nth-child(2){
padding-right:155px;
transform:translate3d(-35px,-425px,0);
}
div.advantage:nth-child(3){
padding-right:155px;
transform:translate3d(50px,-340px,0);
}
div.advantage:nth-child(4){
padding-top:155px;
transform:translate3d(50px,-540px,0);
}
div.advantage:nth-child(5){
padding-left:155px;
transform:translate3d(770px,-1035px,0);
}
div.advantage:nth-child(6){
padding-left:155px;
transform:translate3d(850px,-945px,0);
}
div.advantage:nth-child(7){
padding-left:155px;
transform:translate3d(770px,-850px,0);
}
div.advantage-center{
width:450px;
height:450px;
background: yellow;
margin:120px auto 0 auto;
border:5px solid #c8cacb;
border-radius:50%;
overflow:hidden;
}
Вариант с position отпадает сразу же (по сути тот же translate3d в данном случае). То есть нужно сверстать это самое солнышко, найдя какое-нибудь золотое сечение, используя которое можно быстро рассчитывать положения остальных элементов, либо может у flex'ов есть какое-нибудь замечательное свойство?
UPD Вот что в итоге получилось, благодаря решению от Cheg
Ответ
Не нужно каждому "лучу" указывать отступы в пикселях. Указывайте их в процентах. Таким образом при адаптиве нужно будет "подгонять" стили не у всех элементов, а лишь у нескольких - либо у крайних (слева, справа, сверху и снизу), либо у угловых, тут уж как вам захочется.
Примерно будет выглядеть так:
.container {
position: relative;
width: 450px;
margin: 70px auto 150px auto;
}
.center {
width: 450px;
height: 450px;
border-radius: 100%;
background: yellow;
}
.ray {
width: 130px;
height: 130px;
border-radius: 100%;
background: yellow;
position: absolute;
text-align: center;
line-height: 130px;
}
.ray-1 {
left: 0px;
top: 0px;
transform: translate(-50%, -50%);
}
.ray-2 {
right: 100%;
top: 50%;
transform: translate(-25%, -50%);
}
.ray-3 {
left: 0px;
bottom: 0px;
transform: translate(-50%, 50%);
}
.ray-4 {
left: 50%;
top: 100%;
transform: translate(-50%, 25%);
}
.ray-5 {
right: 0px;
bottom: 0px;
transform: translate(50%, 50%);
}
.ray-6 {
left: 100%;
top: 50%;
transform: translate(25%, -50%);
}
.ray-7 {
right: 0px;
top: 0px;
transform: translate(50%, -50%);
}
Комментариев нет:
Отправить комментарий