1

Что нужно использовать, что бы сверстать такую картинку с шестиугольной обводкой вместе с еще более мелками картинками блок

1

1 ответ 1

5

Видео о том как я рисовал это

.svg {
  width: 600px;
  margin: auto;
}

.red {
  fill: red;
}

.green {
  fill: green;
}

.blue {
  fill: blue;
}

.yellow {
  fill: yellow;
}

.pink {
  fill: pink;
}

.parent {
  stroke-width: 1.6;
  stroke: #d90000;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
<div class="svg">
  <svg viewBox="-3 193 150 106" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
     <clipPath id="clip">
       <path  d="m31.972691 296.86328 23.906994-13.60714 0.0945-27.11979-24.190476-14.17411-23.906994 13.51265 0.1889881 27.87574s23.151042 13.41816 23.906994 13.51265z"/>
     </clipPath>
    </defs>
   <path  class="red" d="m0.5061738 223.81938 15.874999-9.16592 15.40253 8.88245v18.42633l-15.886812 8.98875-15.674199-8.98875z" />
    <image xlink:href="https://s.tb.ru/uploads/site232863/6a476d28-ef4b-49c7-a9f9-88218979d244/6a476d28-ef4b-49c7-a9f9-88218979d244-1560866832327.jpeg" x="0" y="242" width="60" height="60"  clip-path="url(#clip)"/>
    
  <path  class="blue" d="m64.48339 260.97847 16.342722-9.47233-0.188987-18.42634-15.591517-8.97694-15.969496 9.26042 0.0945 18.70982z"/>
   <path  class="yellow" d="m80.637125 233.0798 15.308035-9.26042-0.283482-17.76488-15.024553-8.88244-15.875 9.07143 0.283483 17.85937z"/>
   <path  class="pink" d="m95.94516 223.81938 23.52902-13.32366 23.907 13.60714v27.1198l-24.37947 13.98511-23.434526-13.89062z"/>
   <path  class="parent" d="m0.5061738 223.81938 15.874999-9.16592 15.40253 8.88245v18.42633l17.386909 10.11086-0.0945-18.70982 15.969496-9.26042-0.283483-17.85937 15.875-9.07143 15.024553 8.88244 0.283482 17.76488 23.52902-13.32366 23.907 13.60714v27.1198l-24.37947 13.98511"/>
  </svg>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.