Как правильно сверстать блок по типу Солнышко?

222

13 сентября 2017, 11:11

Есть вот такой блок, в центре статичная картинка большая, по бокам располагаются блоки поменьше (солнышко, блин). Как будет правильным сверстать такой блок?

Пробовал использовать 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; 
}

<div class="advantage-center">&nbsp;</div> 
<div class="empty"> 
	<div class="advantage"> 
		<span>text01</span> 
	</div> 
	<div class="advantage"> 
		<span>text02</span> 
	</div> 
	<div class="advantage"> 
		<span>text03</span> 
	</div> 
	<div class="advantage"> 
		<span>text04</span> 
	</div> 
	<div class="advantage"> 
		<span>text05</span> 
	</div> 
	<div class="advantage"> 
		<span>text06</span> 
	</div> 
	<div class="advantage"> 
		<span>text07</span> 
	</div> 
</div>

Вариант с position отпадает сразу же (по сути тот же translate3d в данном случае). То есть нужно сверстать это самое солнышко, найдя какое-нибудь золотое сечение, используя которое можно быстро рассчитывать положения остальных элементов, либо может у flex'ов есть какое-нибудь замечательное свойство?

UPD Вот что в итоге получилось, благодаря решению от Cheg:

Answer 1

Не нужно каждому "лучу" указывать отступы в пикселях. Указывайте их в процентах. Таким образом при адаптиве нужно будет "подгонять" стили не у всех элементов, а лишь у нескольких - либо у крайних (слева, справа, сверху и снизу), либо у угловых, тут уж как вам захочется.

Примерно будет выглядеть так:

.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%); 
}

<div class="container"> 
  <div class="center"></div> 
  <div class="ray ray-1">1</div> 
  <div class="ray ray-2">2</div> 
  <div class="ray ray-3">3</div> 
  <div class="ray ray-4">4</div> 
  <div class="ray ray-5">5</div> 
  <div class="ray ray-6">6</div> 
  <div class="ray ray-7">7</div> 
</div>

Answer 2

С использованием Flex-box =)

.sun { 
    width: 290px; 
    margin: 0 auto; 
    min-height: 500px; 
    display: flex; 
    flex-direction: column; 
} 
 
.sun .ray{ 
    width: 100%; 
    display: flex; 
    justify-content: space-around; 
    align-items: center; 
} 
 
.sun .ray .elem{ 
    width: 30px; 
    height: 30px; 
    background-color: yellow; 
    border-radius: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
 
.sun .ray .centr-elem{ 
    width: 100px; 
    height: 100px; 
    background-color: yellow; 
}

<div class="sun"> 
  <div class="ray ray1"> 
    <div class="elem">1</div> 
  </div> 
  <div class="ray ray2"> 
    <div class="elem">2</div> 
    <div class="elem">3</div> 
  </div> 
  <div class="ray ray3"> 
    <div class="elem">4</div> 
    <div class="elem centr-elem">image</div> 
    <div class="elem">6</div> 
  </div> 
  <div class="ray ray4"> 
    <div class="elem">7</div> 
    <div class="elem">8</div> 
  </div> 
  <div class="ray ray5"> 
    <div class="elem">9</div> 
  </div> 
</div>

Answer 3

С использованием Css Grid Layout =)

.sun { 
    width: 70%; 
    min-height: 410px; 
    margin: 0 auto; 
    display: grid; 
    grid-template-columns: 1fr 2fr 1fr; 
    grid-template-rows: 1fr 2fr 1fr; 
 
} 
.sun .ray{ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
 
.sun .ray1{ 
    grid-column: 1; 
    grid-row: 1; 
    display: flex; 
    justify-content: flex-end; 
    align-items: flex-end;  
} 
.sun .ray2{ 
    grid-column: 1; 
    grid-row: 2;  
    display: flex; 
    justify-content: flex-start; 
    align-items: center; 
} 
.sun .ray3{ 
    grid-column: 1; 
    grid-row: 3;  
    display: flex; 
    justify-content: flex-end; 
    align-items: flex-start; 
} 
.sun .ray4{ 
    grid-column: 2; 
    grid-row: 3;  
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
.sun .ray5{ 
    grid-column: 3; 
    grid-row: 3;  
    display: flex; 
    justify-content: flex-start; 
    align-items: flex-start; 
} 
.sun .ray6{ 
    grid-column: 3; 
    grid-row: 2;  
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
} 
.sun .ray7{ 
    grid-column: 3; 
    grid-row: 1;  
    display: flex; 
    justify-content: flex-start; 
    align-items: flex-end; 
} 
.sun .ray8{ 
    grid-column: 2; 
    grid-row: 1; 
    display: flex; 
    justify-content: center; 
    align-items: center;  
} 
 
.sun .ray9{ 
    grid-column: 2; 
    grid-row: 2; 
} 
 
.sun .elem{ 
    border-radius: 100%; 
    width: 50px; 
    height: 50px; 
    background-color: #DDCD3D; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
} 
 
.sun .image{ 
    width: 200px; 
    height: 200px; 
}

<div class="sun"> 
 
  <!-- Sun 1 --> 
  <div class="ray ray1"> 
    <div class="elem"> 
      1 
    </div> 
  </div> 
 
  <!-- Sun 2 --> 
  <div class="ray ray2"> 
    <div class="elem"> 
      2 
    </div> 
  </div> 
 
  <!-- Sun 3 --> 
  <div class="ray ray3"> 
    <div class="elem"> 
      3 
    </div> 
  </div> 
 
  <!-- Sun 4 --> 
  <div class="ray ray4"> 
    <div class="elem"> 
      4 
    </div> 
  </div> 
 
  <!-- Sun 5 --> 
  <div class="ray ray5"> 
    <div class="elem"> 
      5 
    </div> 
  </div> 
 
  <!-- Sun 6 --> 
  <div class="ray ray6"> 
    <div class="elem"> 
      6 
    </div> 
  </div> 
 
  <!-- Sun 6 --> 
  <div class="ray ray7"> 
    <div class="elem"> 
      7 
    </div> 
  </div> 
 
  <!-- Sun 8 --> 
  <div class="ray ray8"> 
    <div class="elem"> 
      8 
    </div> 
  </div> 
 
  <!-- Sun 9 --> 
  <div class="ray ray9 ray-img"> 
  <div class="elem image"> 
    Image 
  </div>     
</div>  
 
</div>