Saat ini saya mencoba membuat stepper di CSS. Sejauh ini saya melakukan yang lainnya tetapi sekarang saya harus membuat garis putus-putus dengan panah yang menunjuk ke kanan di bagian bawah mis. garis atas:

enter image description here

Ini adalah tata letak HTML saya:

<div class="step-connection-line-wrapper">
  <span class="step-connection-line-down"></span>
  <span class="step-connection-line-right"></span>
</div>

Saya pertama kali memiliki ide untuk menggunakan border: 1px dotted; tetapi ini terlihat buruk dan memberi saya tepi yang tajam sebagai gantinya atau titik bulat. Masalah kedua adalah batas atas/bawah perlu diubah ukurannya ketika saya membuat browser lebih kecil.

Seperti yang Anda lihat, batas horizontal terkadang di atas dan terkadang di bawah. Untuk itu saya pikir saya bisa mengganti urutan div:

<div class="step-connection-line-wrapper">
  <span class="step-connection-line-right"></span>
  <span class="step-connection-line-down"></span>
</div>

Pernahkah seseorang melakukan ini sebelumnya dan mengetahui cara cerdas alih-alih membuat beberapa elemen anak yang mewakili satu titik?

1
Mr. Jo 15 Januari 2021, 10:29

3 jawaban

Jawaban Terbaik

Anda dapat menggunakan properti gambar batas CSS untuk titik khusus custom

#borderimg { 
  border: 10px solid transparent;
  border-image: url(border.png) 30 round;
}

Jika kebutuhan Anda serumit gambar di atas, Anda dapat melihat pustaka seperti SVG.js

3
Pushkin 15 Januari 2021, 08:10

Solusi satu elemen:

.dot {
  --c:red;  /* color */
  --r:10px; /* circle size */
  --s:10px; /* space bettwen circles */
  
  width:100px;
  height:100px;
  display:inline-block;
  margin:20px;
  position:relative;
  --g:radial-gradient(circle closest-side, var(--c) 85%,transparent);
  background:
    var(--g) calc(var(--s)/-2) 0/calc(var(--r) + var(--s)) var(--r) repeat-x,
    var(--g) 0 calc(var(--s)/-2)/var(--r) calc(var(--r) + var(--s)) repeat-y;
}

.dot::after {
  content:"";
  position:absolute;
  top:calc(var(--r)/2);
  left:100%;
  width:20px;
  height:20px;
  transform:translateY(-50%);
  background:var(--c);
  clip-path:polygon(0 0, 100% 50%,0 100%);
}
<div class="dot"></div>
<div class="dot" style="transform:scaleY(-1);--c:green;width:150px;--r:5px;"></div>
<div class="dot" style="transform:scaleX(-1);--c:orange;height:50px;--s:15px;"></div>
<div class="dot" style="transform:scale(-1);--c:blue;width:80px;--s:5px;"></div>

CSS dotted arrow

3
Temani Afif 16 Januari 2021, 09:59

Satu-satunya cara saya menyadari pekerjaan semacam itu dengan CSS murni adalah memalsukan batas bertitik dengan gambar latar dan gradien. Seperti ini, Anda memerlukan satu elemen untuk setiap baris dan untuk setiap kepala panah. Positioning dimungkinkan menggunakan Flexbox. Ini sedikit peretasan dan saya pribadi lebih suka Solusi yang sudah ditawarkan dengan SVG.js tetapi itu mungkin solusi yang memungkinkan.

Sunting: lupa menyebutkan: Ukuran titik, panah, dll. Semuanya dapat disesuaikan dengan mengubah ukuran batas di ujung panah dan% gradien dan ukuran latar belakang di garis. Panah diubah ukurannya saat Anda mengubah lebar / tinggi jendela Browser. Anda dapat mengujinya di pratinjau satu halaman penuh dari Cuplikan.

.arrow {
  width: 10vw;
  height: 20vh;
  display: flex;
  align-items: center;
}
.arrow-top {
  flex-flow: row wrap;
}
.arrow-top > .arrow-right{
  margin-bottom: -1vw;
}

.arrow-bottom > .arrow-right{
  margin-top: -1vw;
}
.arrow-bottom {
  flex-flow: row wrap-reverse;
}
  .arrow-right {
     display: flex;
      width: 100%;

      align-items: center;
  }
  .arrow-tip {
    width: 0; 
    height: 0; 
    border-top: 1vw solid transparent;
    border-bottom: 1vw solid transparent;
    border-left: 2vw solid green;
  }
  .horizontal{
    width: 90%;
    height: 2px;
    background-image: linear-gradient(to right, black 25%, rgba(255,255,255,0) 0%);
    background-position: bottom;
    background-size: 8px 8px;
    background-repeat: repeat-x;
  }

.vertical{
  height: 98%;
  width: 2px;
  background-image: linear-gradient(black 25%, rgba(255,255,255,0) 0%);
  background-position: right;
  background-size: 8px 8px;
  background-repeat: repeat-y;
}

.spacer {
  height: 50px;
}
<div class="arrow arrow-top">
  <div class="arrow-right">
    <div class="horizontal">
    </div>
    <div class="arrow-tip">
    </div>
  </div>
  <div class="vertical">
  </div>
</div>
<div class="spacer">
</div>
<div class="arrow arrow-bottom">
  <div class="arrow-right">
    <div class="horizontal">
    </div>
    <div class="arrow-tip">
    </div>
  </div>
  <div class="vertical">
  </div>
</div>
1
Warden330 15 Januari 2021, 08:21