3

Здравствуйте, верстаю для себя, учусь. Почти закончил верстать макет, осталась одна секция и я не знаю как ее реализовать. Не нужно писать код и тд, просто опишите словами в какую сторону мне копать. введите сюда описание изображения

8
  • Где-то я уже это видел...
    – MihailPw
    24 июн 2017 в 13:11
  • Ты не умеешь задавать координаты элементов? csshexagon.com
    – Alex78191
    24 июн 2017 в 13:31
  • Сделать ромбы не проблема. Как это должно быть расположено в сетке + красная полоса 24 июн 2017 в 13:40
  • 1
    Не легче ли сделать это через SVG? Это не сетка, а random
    – Alex78191
    24 июн 2017 в 14:57
  • Где ты эту картинку взял?
    – Alex78191
    24 июн 2017 в 15:00

2 ответа 2

1

Копай в сторону SVG, т.к. по-любому тебе придется это еще и адаптировать, и тогда будет слишком много Media Query (медиа-запросов) в CSS. А SVG можно и JS отлавливать и рисовать.

0

Применял inkscape

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 584 333">
  <defs
     id="defs2">
    <pattern
       patternTransform="matrix(0.26458333,0,0,0.26458333,-88.476513,24.685248)"
       id="pattern1766"
       xlink:href="#pattern1045" />
    <pattern
       id="pattern1045"
       patternTransform="matrix(0.26458333,0,0,0.26458333,-101.2588,74.780868)"
       height="489.76595"
       width="1000"
       patternUnits="userSpaceOnUse">
      <image
         y="5.9813265e-014"
         x="-5.4123372e-015"
         id="image1000"
         xlink:href="https://www.southmountain.com/wp-content/uploads/2012/09/ready-to-launch.jpg"
         preserveAspectRatio="none"
         height="489.76596"
         width="1000.0001" />
    </pattern>
  </defs>
  <g
     transform="translate(443.02058,60.6779)">
    <g
       transform="translate(-116.37327,53.661006)"
       id="g1780">
      <ellipse
         style="fill:#000000;fill-opacity:0;stroke:#675a60;stroke-width:2;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
         id="path826"
         cx="-234.46106"
         cy="-45.584476"
         rx="7.5595236"
         ry="7.9375" />
      <path
         style="fill:none;fill-opacity:1;stroke:#675a60;stroke-width:1.33699298;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
         id="path849"
         d="m -115.20366,-44.95371 2.73533,-28.509912 26.057968,-11.886091 23.322643,16.62382 -2.735329,28.509912 -26.057972,11.886091 z"
         transform="matrix(1.5598682,-0.1448872,0.15918552,1.4197581,-44.769767,41.48118)" />
      <path
         transform="matrix(1.6306258,-0.15155978,0.16640638,1.4851432,90.36497,66.99781)"
         d="m -115.20366,-44.95371 2.73533,-28.509912 26.057968,-11.886091 23.322643,16.62382 -2.735329,28.509912 -26.057972,11.886091 z"
         id="path851"
         style="fill:none;fill-opacity:1;stroke:#675a60;stroke-width:1.27855361;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
      <path
         style="fill:none;fill-opacity:1;stroke:#675a60;stroke-width:1.32568717;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
         id="path853"
         d="m -115.20366,-44.95371 2.73533,-28.509912 26.057968,-11.886091 23.322643,16.62382 -2.735329,28.509912 -26.057972,11.886091 z"
         transform="matrix(1.5598682,-0.14736901,0.15918552,1.4440775,123.88807,2.07046)" />
      <path
         style="fill:none;fill-opacity:1;stroke:#675a60;stroke-width:0.84526575;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
         id="path855"
         d="m -115.20366,-44.95371 2.73533,-28.509912 26.057968,-11.886091 23.322643,16.62382 -2.735329,28.509912 -26.057972,11.886091 z"
         transform="matrix(2.4803619,-0.22796833,0.25312249,2.2338751,312.36846,92.16508)" />
      <ellipse
         style="fill:#dc0000;fill-opacity:1;stroke:#dc0000;stroke-width:2;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
         id="path828"
         cx="-232.60902"
         cy="-46.684193"
         rx="8.1264868"
         ry="7.3705354" />
      <ellipse
         ry="7.3705354"
         rx="8.1264868"
         cy="-25.819906"
         cx="-106.51612"
         id="ellipse830"
         style="fill:#dc0000;fill-opacity:1;stroke:#dc0000;stroke-width:2;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
      <ellipse
         style="fill:#dc0000;fill-opacity:1;stroke:#dc0000;stroke-width:2;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
         id="ellipse832"
         cx="-64.938744"
         cy="-88.941933"
         rx="8.1264868"
         ry="7.3705354" />
      <ellipse
         ry="7.3705354"
         rx="8.1264868"
         cy="-48.800858"
         cx="17.384478"
         id="ellipse834"
         style="fill:#dc0000;fill-opacity:1;stroke:#dc0000;stroke-width:2;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill" />
      <ellipse
         style="fill:#dc0000;fill-opacity:1;stroke:#dc0000;stroke-width:2;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
         id="ellipse836"
         cx="79.145782"
         cy="48.33902"
         rx="8.1264868"
         ry="7.3705354" />
      <path
         style="fill:none;stroke:#dc0000;stroke-width:3.98532152;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
         d="m -238.40734,-44.082336 43.75164,-23.646834 39.91536,19.414888 -0.14829,42.7063501 47.75909,23.9002829 0.0635,-43.135888 41.254547,-20.931581 0.539174,-41.904351 40.636147,-20.767461 41.063679,20.368886 0.07618,40.787414 61.395976,-30.997964 61.484247,31.227272 0.57713,65.171474 -61.287467,30.781638"
         id="path872" />
      <path
         style="fill:url(#pattern1766);fill-opacity:1;stroke:none;stroke-width:4;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1;paint-order:markers stroke fill"
         id="path979"
         d="m -309.03566,118.56098 1.42152,-67.113952 58.83315,-32.325904 57.41162,34.788049 -1.42152,67.113957 -58.83314,32.3259 z"
         transform="matrix(1.0480021,-0.01778236,0.02219792,0.93757749,104.88076,-25.842713)" />
    </g>
  </g>
</svg>

5
  • с таким же успехом можно было-бы и в фотошопе сделать и в base64 загнать 23 ноя 2018 в 5:11
  • ну сделай тогда - я тоже минус поставлю потом и напишу ерунду какую не будь ...
    – Nikita
    23 ноя 2018 в 6:45
  • Nikita, разумная критика должна помогать прогрессу, не стоит ее отвергать. И на ты мы не переходили. 23 ноя 2018 в 6:49
  • @ArtemGorlachev покажиТе мастер класс
    – Nikita
    23 ноя 2018 в 6:54
  • @ArtemGorlachev да и к тому же у меня рейтинг не позволяет не плюсовать не минусовать ...но буду РАД мастер классу
    – Nikita
    23 ноя 2018 в 6:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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