Как разработать этот макет - PullRequest
Новая
       3

Как разработать этот макет

0 голосов
/ 08 марта 2020

Я занимаюсь разработкой целевой страницы, которая в одном из разделов имеет макет ниже с кружками, соединенными линиями, мой главный вопрос - как сделать этот формат зигзагообразным?

Мне только что удалось это сделать это прямо. 

body {
  padding: 0;
  margin: 0;
  background: #1f1e1e
}

.wrapper {
  margin-top: 100px;
  display: flex;
  align-items: center;
}

.line {
  width: 106px;
  height: 3px;
  background: #fff;
}

.circle {
  width: 251px;
  height: 251px;
  border-radius: 50%;
  border: solid 3px #fff;
  background-color: transparent;
}
<body>
  <div class="wrapper">
    <!-- 1 -->
    <div class="line"></div>
    <div class="circle"></div>
    <!-- 2 -->
    <div class="line"></div>
    <div class="circle"></div>
    <!-- 3 -->
    <div class="line"></div>
    <div class="circle"></div>
    <!-- 4 -->
    <div class="line"></div>
    <div class="circle"></div>
    <!-- 5 -->
    <div class="line"></div>
    <div class="circle"></div>
    <div class="line"></div>
  </div>
</body>

https://codepen.io/erickkf600/pen/VwLrRKP

Мне удалось развиться в SVG, но очень важно, что он целиком с html и чистый css

body {
  padding: 0;
  margin: 0;
  background: #1f1e1e
}
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1925.82 589">
            <defs>
                <style>
                    .cls-1 {
                        fill: #fff;
                    }
                    .cls-1,
                    .cls-2 {
                        stroke: #fff;
                        stroke-miterlimit: 10;
                        stroke-width: 3px;
                    }
    
                    .cls-2 {
                        fill: none;
                    }
                </style>
            </defs>
            <path class="cls-1" d="M195.73,188,.73,297Z" transform="translate(1.49)" />
            <circle class="cls-2" cx="323.22" cy="162" r="126" />
            <polyline class="cls-1" points="430.97 227.35 613.72 361.5 614.72 362.5" />
            <circle class="cls-2" cx="692.72" cy="461.5" r="126" />
            <circle class="cls-2" cx="921.72" cy="130.5" r="126" />
            <circle class="cls-2" cx="1232.72" cy="447.5" r="126" />
            <polyline class="cls-2" points="1029.36 196.03 1031.72 198.5 1164.72 341.5" />
            <line class="cls-2" x1="1431.72" y1="239.5" x2="1341.38" y2="383.68" />
            <circle class="cls-2" cx="1492.72" cy="127.5" r="126" />
            <polyline class="cls-2" points="1922.72 334.5 1603.72 194.5 1601.72 193.5" />
            <path class="cls-2" d="M2102.23,256.5" transform="translate(1.49)" />
            <line class="cls-2" x1="858.22" y1="238" x2="776.71" y2="367.57" />
            <polyline class="cls-2" points="1922.32 334.32 1923.59 334.94 1925.31 335.56" />
            <line class="cls-2" x1="197.22" y1="188" x2="199.24" y2="186.88" />
            <line class="cls-2" x1="2.22" y1="297" x2="0.73" y2="297.83" />
            <path class="cls-2" d="M-412-85" transform="translate(1.49)" />
        </svg>

https://codepen.io/erickkf600/pen/qBdVvqZ

...