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

#html #css

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

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

	

		text01
	
	

		text02
	
	

		text03
	
	

		text04
	
	

		text05
	
	

		text06
	
	

		text07
	





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

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


    

Ответы

Ответ 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%);
}

  

  
1
  
2
  
3
  
4
  
5
  
6
  
7



Ответ 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;
}

  

    
1
  
  

    
2
    
3
  
  

    
4
    
image
    
6
  
  

    
7
    
8
  
  

    
9
  



Ответ 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;
}


  
  

    

      1
    
  

  
  

    

      2
    
  

  
  

    

      3
    
  

  
  

    

      4
    
  

  
  

    

      5
    
  

  
  

    

      6
    
  

  
  

    

      7
    
  

  
  

    

      8
    
  

  
  

  

    Image