Как сверстать круглый блок с иконками внутри?

212

14 апреля 2018, 17:29

Подскажите, пожалуйста, как сверстать такое расположение иконок?
Если приглядеться, там по окружности (белый фон с несколькими кругами) расположены кликабельные иконки...

У меня вообще нет идей.

Answer 1

Решение SVG

Для реализации тени используются две окружности, одна над другой.
К нижней окружности применен фильтр Гаусса. С помощью атрибутов этого фильтра можно тонко отрегулировать насыщенность и положение тени. stdDeviation="4" dx="0" dy="2" Я сделал, как у автора вопроса. Если нужно что-то изменить во внешнем виде тени, меняйте эти атрибуты и радиусы окружностей.
Иконки добавлены через тег <image> внутри svg файла. Это гарантирует, что иконка и окружность с тенью не разъедутся при изменении масштаба.
Я использовал для демонстрации 3 комплекта иконок+окружности. Можно клонировать и позиционировать комплекты других иконок с помощью команды

<use xlink:href="#icon" x="20" y="100"/>

Иконки бывают разного размера. В этой технике легко изменить х размеры с помощью процентов <image>

<image xlink:href="Safari.png" x="90px" y="170px" width="15%" height="15%" />

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400" viewBox="0 0 400 400"> 
   
   <defs> 
    <filter id="dropshadow" width="130%" height="130%"> 
      <feGaussianBlur in="SourceAlpha" stdDeviation="4"/>  
      <feOffset dx="0" dy="2" result="offsetblur"/>  
      <feMerge>  
        <feMergeNode/> 
        <feMergeNode in="SourceGraphic"/>  
      </feMerge> 
    </filter> 
  </defs> 
    
   <g  id="icon"> 
 <circle cx="100" cy="100" r="30" fill="#FFFFFF" filter="url(#dropshadow)"/> 
   <circle cx="100" cy="100" r="35" fill="#FFFFFF" />   
     </g>   
 	  
  
 <use xlink:href="#icon" x="150" y="50"/>	  
  <image xlink:href="https://i.stack.imgur.com/P6Rbo.png" x="75px" y="76px" width="12%" height="12%" />  
  
 <use xlink:href="#icon" x="20" y="100"/> 
 <image xlink:href="https://i.stack.imgur.com/oEW1L.png" x="90px" y="170px" width="15%" height="15%" />    
  
 <image xlink:href="https://i.stack.imgur.com/y06Su.png" x="220px" y="120px" width="15%" height="15%" />  
</svg>

Answer 2

Разумеется что нету определённого алгоритма как расположить эти элементы

Я показал только одну часть ибо направляю в нужное русло

Дальше по шагам ... один блок в нём потомки ...и по такому примеру и сколько нужно потомков ...

Нужное правило для этого : transform:origin(x,y,z); и правильное позиционирование

Но лучше конечно для этого применить svg

* { 
  margin: 0; 
  padding: 0; 
} 
 
.items { 
  width: 330px; 
  height: 330px; 
  margin: 90px auto; 
  border: 1px solid red; 
  position: relative; 
  border-radius: 50%; 
} 
 
.items>div { 
  position: absolute; 
  top: -20%; 
  left: 35%; 
  transform-origin: 50% 230% 0; 
  width: 100px; 
  height: 100px; 
  border-radius: 50%; 
} 
 
.item1 { 
  background: red; 
  transform: rotate(0deg); 
} 
 
.item2 { 
  background: green; 
  transform: rotate(-90deg); 
} 
 
.item3 { 
  background: blue; 
  transform: rotate(90deg); 
} 
 
.item4 { 
  background: orange; 
  transform: rotate(180deg); 
}

<div class="items"> 
  <div class="item1"> 
 
  </div> 
  <div class="item2"> 
 
  </div> 
  <div class="item3"> 
 
  </div> 
  <div class="item4"> 
 
  </div> 
</div>