5

Доброго времени суток! Необходимо разместить 9 элементов, и сделать "цепочку", соединённую синей линией. Вот как на макете: введите сюда описание изображения

Много чего сделал, а именно на этом моменте остановился уже больше чем на пол дня. Вот СSS:

.diamond {
    text-align: center;
    width: 60px;
    height: 60px;
    background: #07aad8;        
    transform: rotate(45deg);    
    border-radius: 10px;
    overflow: hidden; }

.diamond >img {
    max-width: 100%;
    transform: rotate(-45deg);}

В html каждый из девяти элементов имеет такую структуру:

  <div class="col-6 col-sm-6 col-lg-4">
    <div class="diamond my-5">
      <img src="images/rm-1.png" alt="" class="">
    </div>                  
    <p class="mx-4">Консультация технической возможности вашего проекта</p>
  </div>

Пишу на BS4, соответственно адаптивность этой карте тоже нужна.

2
  • Скажите хотя бы, возможно ли это вообще реализовать с помощью одного лишь html и css именно в таком виде связывающей линии и плюс перестройка блоков на устройствах с малыми экранами, ибо меня уже берут сомнения, что это вообще возможно реализовать 23 апр 2018 в 21:30
  • Лень мне доводить для полноценного ответа, но я сделал бы (и делал) так - jsfiddle.net/3ef0Lqa4 - остается только подогнать миксины и номера родителей под col-6, а лучше вообще разделить по медиа запросам (текущую верстку только на col-4, вторую подогнать на col-6) 24 апр 2018 в 7:21

2 ответа 2

4

1) Вариант на html css с иконками

* {
  margin: 0;
  padding: 0;
}

.over-wrapper {
  overflow: hidde;
  border: 1px solid red;
  width: 460px;
  height: 450px;
  margin: 30px auto;
}

.wrapper {
  width: 1424px;
  height: 1400px;
  background: #fff;
  margin: 0 auto;
  transform: scale(.33)translate(-1470px, -1450px);
  text-align: center;
  position: relative;
}

.item {
  width: 300px;
  height: 300px;
  display: inline-block;
  background: #07AAD8;
  transform: rotate(45deg);
  margin: 140px;
  zoom: .8;
  vertical-align: top;
  text-align: center;
  position: relative;
  z-index: 100;
}

.item p {
  zoom: 4;
  transform: rotate(-45deg);
}

hr.line1 {
  position: absolute;
  top: 230px;
  zoom: 1;
  width: 1400px;
  margin-left: -30px;
}

hr.line2 {
  position: absolute;
  top: 700px;
  zoom: 1;
  width: 1370px;
}

hr.line3 {
  position: absolute;
  top: 1160px;
  zoom: 1;
  width: 1400px;
}

hr {
  border-color: #07AAD8;
}

.item:nth-child(4):before {
  content: "";
  display: block;
  border-radius: 50%;
  width: 580px;
  height: 590px;
  position: absolute;
  border: 4px solid #07AAD8;
  left: 200px;
  top: -75px;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
}

.item:nth-child(5):before {
  content: "";
  display: block;
  border-radius: 50%;
  width: 580px;
  height: 580px;
  position: absolute;
  border: 4px solid #07AAD8;
  left: -110px;
  top: 240px;
  border-top: 2px solid transparent;
  border-right: 2px solid transparent;
}

.item i.fa {
  display: block;
  zoom: 8;
  transform: rotate(-45deg);
  margin: 10px;
  color: #fff;
}

p.text {
  font-size: 12px;
  font-weight: 100;
  width: 130px;
  position: absolute;
  top: 100%;
  left: 20px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="over-wrapper">
  <div class="wrapper">
    <div class="item"></div>
    <hr class="line1">
    <div class="item">
      <i class="fa fa-home"></i>
      <p class="text">Lorem ipsum dolor sit amet consectetur.</p>
    </div>
    <div class="item">
      <p class="text">Lorem ipsum dolor sit amet consectetur.</p>
    </div>
    <div class="item"></div>
    <hr class="line2">
    <div class="item">
      <i class="fa fa-commenting"></i>
    </div>
    <div class="item"></div>
    <div class="item"></div>
    <hr class="line3">
    <div class="item">
      <i class="fa fa-ambulance"></i>
    </div>
    <div class="item">
      <i class="fa fa-fighter-jet"></i>
      <p class="text">Lorem ipsum dolor sit amet consectetur.</p>
    </div>
  </div>
</div>

1
  • Ещё border можно для ромбов добавить, как на картинке у ТС
    – Arthur
    24 апр 2018 в 12:08
1

2) Вариант 2 svg с иконками

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></head><body><?xml version="1.0" encoding="UTF-8" standalone="no"?><svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg8" version="1.1" viewBox="0 0 297 210"> <defs id="defs2"/> <g transform="translate(0,-87)" id="layer1"> <g transform="matrix(0.98597877,0,0,1,2.1028279,0)" id="g4954"> <g id="g4869" transform="matrix(0.90753233,0,0,0.89078701,13.657363,20.471555)"> <g transform="matrix(1.1258509,0,0,0.93765417,-16.548395,9.8724553)" id="g4756"> <g id="g4548" transform="matrix(0.68254582,0,0,0.6075531,17.00241,34.598018)"> <rect transform="matrix(0.71806577,-0.69597525,-0.68336647,-0.73007552,0,0)" y="-163.69212" x="-80.57048" height="49.25576" width="49.296112" id="rect4536" style="fill:#00ffff;stroke-width:0.13037589"/> <text transform="scale(1.0571616,0.94592918)" id="text4540" y="197.34793" x="21.951866" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;line-height:1.25;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.2155738" xml:space="preserve"><tspan style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.2155738" y="197.34793" x="21.951866" id="tspan4538">lorem ipsum sit</tspan><tspan id="tspan4542" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.2155738" y="208.12662" x="21.951866">ammed dollar</tspan></text> </g> <g id="g4548-8" transform="matrix(0.68254581,0,0,0.6075531,112.22328,34.653791)"> <rect transform="matrix(0.71806577,-0.69597525,-0.68336647,-0.73007552,0,0)" y="-163.69212" x="-80.57048" height="49.25576" width="49.296112" id="rect4536-2" style="fill:#00ffff;stroke-width:0.13037589"/> <text transform="scale(1.0571616,0.94592918)" id="text4540-9" y="197.34793" x="21.951866" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;line-height:1.25;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.2155738" xml:space="preserve"><tspan style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.2155738" y="197.34793" x="21.951866" id="tspan4538-5">lorem ipsum sit</tspan><tspan id="tspan4542-0" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.2155738" y="208.12662" x="21.951866">ammed dollar</tspan></text> </g> <g id="g4665"> <rect transform="matrix(0.75715709,-0.65323283,-0.72464855,-0.68911863,0,0)" y="-263.45392" x="61.572861" height="31.704073" width="31.909698" id="rect4536-6" style="fill:#00ffff;stroke-width:0.08415527"/> <text transform="scale(1.1205085,0.89245195)" id="text4540-98" y="165.91379" x="193.22417" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.55282211px;line-height:1.25;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.13882063" xml:space="preserve"><tspan style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.55282211px;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.13882063" y="165.91379" x="193.22417" id="tspan4538-0">lorem ipsum sit</tspan><tspan id="tspan4542-3" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:5.55282211px;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.13882063" y="172.85481" x="193.22417">ammed dollar</tspan></text> </g> <g id="g4548-2" transform="matrix(0.68254581,0,0,0.6075531,15.816067,103.50548)"> <rect transform="matrix(0.71806577,-0.69597525,-0.68336647,-0.73007552,0,0)" y="-163.69212" x="-80.57048" height="49.25576" width="49.296112" id="rect4536-26" style="fill:#00ffff;stroke-width:0.13037589"/> <text transform="scale(1.0571616,0.94592918)" id="text4540-95" y="197.34793" x="21.951866" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;line-height:1.25;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.2155738" xml:space="preserve"><tspan style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.2155738" y="197.34793" x="21.951866" id="tspan4538-51">lorem ipsum sit</tspan><tspan id="tspan4542-9" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.2155738" y="208.12662" x="21.951866">ammed dollar</tspan></text> </g> <g id="g4548-5" transform="matrix(0.68254581,0,0,0.6075531,112.81646,104.26143)"> <rect transform="matrix(0.71806577,-0.69597525,-0.68336647,-0.73007552,0,0)" y="-163.69212" x="-80.57048" height="49.25576" width="49.296112" id="rect4536-67" style="fill:#00ffff;stroke-width:0.13037589"/> <text transform="scale(1.0571616,0.94592918)" id="text4540-6" y="197.34793" x="21.951866" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;line-height:1.25;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.2155738" xml:space="preserve"><tspan style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.2155738" y="197.34793" x="21.951866" id="tspan4538-9">lorem ipsum sit</tspan><tspan id="tspan4542-92" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.2155738" y="208.12662" x="21.951866">ammed dollar</tspan></text> </g> <g id="g4548-24" transform="matrix(0.68254581,0,0,0.6075531,199.32059,105.33622)"> <rect transform="matrix(0.71806577,-0.69597525,-0.68336647,-0.73007552,0,0)" y="-163.69212" x="-80.57048" height="49.25576" width="49.296112" id="rect4536-9" style="fill:#00ffff;stroke-width:0.13037589"/> <text transform="scale(1.0571616,0.94592918)" id="text4540-7" y="197.34793" x="21.951866" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;line-height:1.25;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.2155738" xml:space="preserve"><tspan style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.2155738" y="197.34793" x="21.951866" id="tspan4538-56">lorem ipsum sit</tspan><tspan id="tspan4542-2" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.2155738" y="208.12662" x="21.951866">ammed dollar</tspan></text> </g> <g id="g4548-84" transform="matrix(0.68254581,0,0,0.6075531,18.258391,168.13918)"> <rect transform="matrix(0.71806577,-0.69597525,-0.68336647,-0.73007552,0,0)" y="-163.69212" x="-80.57048" height="49.25576" width="49.296112" id="rect4536-8" style="fill:#00ffff;stroke-width:0.13037589"/> <text transform="scale(1.0571616,0.94592918)" id="text4540-980" y="197.34793" x="21.951866" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;line-height:1.25;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.2155738" xml:space="preserve"><tspan style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.2155738" y="197.34793" x="21.951866" id="tspan4538-1">lorem ipsum sit</tspan><tspan id="tspan4542-7" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.2155738" y="208.12662" x="21.951866">ammed dollar</tspan></text> </g> <g id="g4548-842" transform="matrix(0.68254581,0,0,0.6075531,111.92088,170.86061)"> <rect transform="matrix(0.71806577,-0.69597525,-0.68336647,-0.73007552,0,0)" y="-163.69212" x="-80.57048" height="49.25576" width="49.296112" id="rect4536-0" style="fill:#00ffff;stroke-width:0.13037589"/> <text transform="scale(1.0571616,0.94592918)" id="text4540-1" y="197.34793" x="21.951866" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;line-height:1.25;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.2155738" xml:space="preserve"><tspan style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.2155738" y="197.34793" x="21.951866" id="tspan4538-10">lorem ipsum sit</tspan><tspan id="tspan4542-01" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.2155738" y="208.12662" x="21.951866">ammed dollar</tspan></text> </g> <g id="g4548-4" transform="matrix(0.68254581,0,0,0.6075531,201.04767,170.25586)"> <rect transform="matrix(0.71806577,-0.69597525,-0.68336647,-0.73007552,0,0)" y="-163.69212" x="-80.57048" height="49.25576" width="49.296112" id="rect4536-1" style="fill:#00ffff;stroke-width:0.13037589"/> <text transform="scale(1.0571616,0.94592918)" id="text4540-15" y="197.34793" x="21.951866" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;line-height:1.25;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.2155738" xml:space="preserve"><tspan style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.2155738" y="197.34793" x="21.951866" id="tspan4538-6">lorem ipsum sit</tspan><tspan id="tspan4542-4" style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:8.62294769px;font-family:Bahnschrift;-inkscape-font-specification:'Bahnschrift, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;text-align:start;writing-mode:lr-tb;text-anchor:start;stroke-width:0.2155738" y="208.12662" x="21.951866">ammed dollar</tspan></text> </g> </g> <path id="path527-8" d="M 76.426802,121.99681 H 116.4268" style="fill:none;stroke:#00ffff;stroke-width:1.12007785;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <path id="path527-81" d="m 182.48703,121.08963 h 40" style="fill:none;stroke:#00ffff;stroke-width:1.12007785;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <path id="path527-2" d="M 74.763701,188.29386 H 114.76378" style="fill:none;stroke:#00ffff;stroke-width:1.12007785;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <path id="path527-9" d="m 181.65541,188.29398 39.99952,-0.11347" style="fill:none;stroke:#00ffff;stroke-width:1.12007785;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <path id="path527-5" d="M 76.729185,250.58438 H 116.72926" style="fill:none;stroke:#00ffff;stroke-width:1.12007785;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> <path id="path527-0" d="m 182.63822,250.43306 h 40" style="fill:none;stroke:#00ffff;stroke-width:1.12007785;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/> </g> <path style="fill:none;stroke:#00ffff;stroke-width:1.0070852;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 25.005144,187.4577 c -23.2087457,7.63278 -31.4218141,39.42855 -2.319549,52.53632" id="path4879"/> <path style="fill:none;stroke:#00f000;stroke-width:1.0070852;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0" d="m 268.93477,187.61514 c 23.20874,-8.23274 31.42181,-42.52779 2.31955,-56.66594" id="path4879-7"/> </g> <path style="opacity:1;fill:none;stroke:#00ffff;stroke-width:0.99999994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" d="m 269.19296,130.89012 c 22.88334,7.63278 30.98125,39.42856 2.28703,52.53633" id="path4879-5"/> <text id="text5792" y="132.95834" x="50.648811" style="font-style:normal;font-weight:normal;font-size:10.58333333px;line-height:1.25;font-family:FontAwesome;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458332;-inkscape-font-specification:'FontAwesome, Normal';font-stretch:normal;font-variant:normal;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;" xml:space="preserve"><tspan style="fill:#ffffff;stroke-width:0.26458332;-inkscape-font-specification:'FontAwesome, Normal';font-family:FontAwesome;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:10.58333333px;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;" y="132.95834" x="50.648811" id="tspan5790"></tspan></text> <text id="text5796" y="132.58035" x="145.14285" style="font-style:normal;font-weight:normal;font-size:10.58333333px;line-height:1.25;font-family:FontAwesome;letter-spacing:0px;word-spacing:0px;fill:#f9f9f9;fill-opacity:1;stroke:none;stroke-width:0.26458332;-inkscape-font-specification:'FontAwesome, Normal';font-stretch:normal;font-variant:normal;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;" xml:space="preserve"><tspan style="fill:#f9f9f9;stroke-width:0.26458332;-inkscape-font-specification:'FontAwesome, Normal';font-family:FontAwesome;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:10.58333333px;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;" y="132.58035" x="145.14285" id="tspan5794"></tspan></text> <text id="text5800" y="133.71429" x="234.72322" style="font-style:normal;font-weight:normal;font-size:10.58333333px;line-height:1.25;font-family:FontAwesome;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458332;-inkscape-font-specification:'FontAwesome, Normal';font-stretch:normal;font-variant:normal;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;" xml:space="preserve"><tspan style="fill:#ffffff;stroke-width:0.26458332;-inkscape-font-specification:'FontAwesome, Normal';font-family:FontAwesome;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:10.58333333px;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;" y="133.71429" x="234.72322" id="tspan5798"></tspan></text> <text id="text5804" y="190.41071" x="49.136909" style="font-style:normal;font-weight:normal;font-size:10.58333333px;line-height:1.25;font-family:FontAwesome;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458332;-inkscape-font-specification:'FontAwesome, Normal';font-stretch:normal;font-variant:normal;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;" xml:space="preserve"><tspan style="fill:#ffffff;stroke-width:0.26458332;-inkscape-font-specification:'FontAwesome, Normal';font-family:FontAwesome;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:10.58333333px;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;" y="190.41071" x="49.136909" id="tspan5802"></tspan></text> <text id="text5808" y="190.03275" x="146.65477" style="font-style:normal;font-weight:normal;font-size:10.58333333px;line-height:1.25;font-family:FontAwesome;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458332;-inkscape-font-specification:'FontAwesome, Normal';font-stretch:normal;font-variant:normal;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;" xml:space="preserve"><tspan style="fill:#ffffff;stroke-width:0.26458332;-inkscape-font-specification:'FontAwesome, Normal';font-family:FontAwesome;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:10.58333333px;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;" y="190.03275" x="146.65477" id="tspan5806"></tspan></text> <text id="text5812" y="191.54465" x="233.96725" style="font-style:normal;font-weight:normal;font-size:10.58333333px;line-height:1.25;font-family:FontAwesome;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458332;-inkscape-font-specification:'FontAwesome, Normal';font-stretch:normal;font-variant:normal;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;" xml:space="preserve"><tspan style="fill:#ffffff;stroke-width:0.26458332;-inkscape-font-specification:'FontAwesome, Normal';font-family:FontAwesome;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:10.58333333px;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;" y="191.54465" x="233.96725" id="tspan5810"></tspan></text> <text id="text5816" y="242.94939" x="50.648808" style="font-style:normal;font-weight:normal;font-size:10.58333333px;line-height:1.25;font-family:FontAwesome;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458332;-inkscape-font-specification:'FontAwesome, Normal';font-stretch:normal;font-variant:normal;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;" xml:space="preserve"><tspan style="fill:#ffffff;stroke-width:0.26458332;-inkscape-font-specification:'FontAwesome, Normal';font-family:FontAwesome;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:10.58333333px;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;" y="242.94939" x="50.648808" id="tspan5814"></tspan></text> <text id="text5820" y="246.3512" x="144.76488" style="font-style:normal;font-weight:normal;font-size:10.58333333px;line-height:1.25;font-family:FontAwesome;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458332;-inkscape-font-specification:'FontAwesome, Normal';font-stretch:normal;font-variant:normal;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;" xml:space="preserve"><tspan style="fill:#ffffff;stroke-width:0.26458332;-inkscape-font-specification:'FontAwesome, Normal';font-family:FontAwesome;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:10.58333333px;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;" y="246.3512" x="144.76488" id="tspan5818"></tspan></text> <text id="text5824" y="246.3512" x="235.10118" style="font-style:normal;font-weight:normal;font-size:10.58333333px;line-height:1.25;font-family:FontAwesome;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:0.26458332;-inkscape-font-specification:'FontAwesome, Normal';font-stretch:normal;font-variant:normal;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;" xml:space="preserve"><tspan style="stroke-width:0.26458332;fill:#ffffff;-inkscape-font-specification:'FontAwesome, Normal';font-family:FontAwesome;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:10.58333333px;text-anchor:start;text-align:start;writing-mode:lr;font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;font-feature-settings:normal;" y="246.3512" x="235.10118" id="tspan5822"></tspan></text> </g></svg></body></html>

14
  • 1
    замечательные ответы. Только на мой взгляд обязательно должны быть уточняющие комментарии. 24 апр 2018 в 7:09
  • Саша мне ужос как лень комментировать ...я из за этого не работаю на студиях ... из за этого я потерял много работы из за раскоментиования кода
    – user33274
    24 апр 2018 в 7:10
  • всем лень и мне тоже:))) С комментариями пользы намного больше 24 апр 2018 в 7:19
  • Саша с меня хреновый сенсей .. я могу сделать но объяснять попа
    – user33274
    24 апр 2018 в 7:22
  • @ArtemGorlachev ты про кого ща сказал ?
    – user33274
    24 апр 2018 в 7:28

Ваш ответ

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

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