Membuat CSS3 Lingkaran dihubungkan dengan garis-garis

Question

Lebih

Sumber Tidak AMP-versi Sunting

Membuat CSS3 Lingkaran dihubungkan dengan garis-garis

Saya harus menerapkan mengikuti lingkaran dan garis kombinasi CSS, dan saya mencari petunjuk tentang cara untuk menerapkan hal ini secara efektif. Lingkaran dan garis akan terlihat seperti ini:

Saya mampu melaksanakan lingkaran seperti:

span.step {
  background: #ccc;
  border-radius: 0.8em;
  -moz-border-radius: 0.8em;
  -webkit-border-radius: 0.8em;
  color: #1f79cd;
  display: inline-block;
  font-weight: bold;
  line-height: 1.6em;
  margin-right: 5px;
  text-align: center;
  width: 1.6em; 
}

tapi garis rumit bagi saya untuk mengerti.

Ukuran lingkaran perubahan tergantung pada apakah itu adalah langkah aktif atau tidak, dan warna dari garis yang menghubungkan lingkaran-lingkaran perubahan juga tergantung pada status. Bagaimana saya akan mencapai hal ini?

HGandhi

Pertanyaan edit 28 Oktober 2013 в 9:31

Pemrograman

css3 css css-float sass

28 Oktober 2013 в 6:25

7 tayangan

Mengomentari pertanyaan (5)

ccondrup

Sumber Tidak AMP-versi Sunting

Kerja dari setiap jawaban @bookcasey saya menemukan diri saya melakukan itu dengan cara yang berlawanan untuk mendapatkannya responsif;

Saya menempatkan lingkaran sebagai ::sebelum pseudo selector (dengan otomatis css counter).
Garis antara yang li elemen sehingga mereka dapat ditarik oleh flexbox.

Sekarang membentang untuk mengisi induk, dan berhubungan dengan nomor yang berbeda dari langkah-langkah secara otomatis. Anda juga dapat melakukan hal-hal seperti menyesuaikan font-size pada orang tua ul dan memiliki seluruh hal beradaptasi.

I'm yakin itu dapat ditingkatkan sehingga merasa bebas untuk berkontribusi :)

Interaktif CodePen: Flexbox Timeline dengan langkah-langkah: http://codepen.io/ccondrup/pen/bqbGWB?editors=1100

ul {
  align-content: center;
  align-items: center;
  counter-reset: stepCount;
  display: flex;
  justify-content: space-around;
  margin: 10vh auto 20vh;  /* for codepen */
}

li {
  background: dodgerblue;
  color: white;
  content: ' ';
  display: flex;
  flex-grow: 1;
  height: .3em;
  line-height: 1em;
  margin: 0;
  position: relative;
  text-align: right;
  z-index: -1;
}

li::before {
  background: dodgerblue;
  border-radius: 50%;
  color: white;
  content: counter(stepCount);
  counter-increment: stepCount;
  height: 2em;
  left: -2em;
  line-height: 2em;
  position: absolute;
  text-align: center;
  top: -.85em;
  width: 2em;
}

li.active {
  background-color: lightblue;
}

li.active~li {
  background-color: lightblue;
}

li.active~li::before {
  background-color: lightblue;
}

li:last-child {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 0;
/* Shorthand: flex: 0 1 0; */
}

ul.bigger {
  font-size: 1.3em;
}

ul.highlight-active li.active::before {
  font-size: 1.6em;
  background: navy;
}

ul.roman li::before {
  content: counter(stepCount, upper-roman);
}

ul.triangle li::before {
  width: 0;
  height: 0;
  border-radius: 0;
  border-left: 1em solid white;
  border-right: 1em solid white;
  border-bottom: .8em solid dodgerblue;
  content: '';
  top: -.65em;
}

ul.triangle li:first-child::before {
  left: 0;
}

ul.triangle li.active~li::before {
  border-bottom-color: lightblue;
}

<ul>
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<ul class="bigger highlight-active">
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
</ul>

<ul class="roman">
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<ul class="triangle">
  <li></li>
  <li></li>
  <li class="active"></li>
  <li></li>
  <li></li>
</ul>

Community

Jawaban edit 23 Mei 2017 в 11:54

10

0

Komentar (2)

Tyler Eich

Sumber Tidak AMP-versi Sunting

Meskipun hal ini mungkin dengan CSS3, saya pikir SVG adalah sebuah alat yang lebih baik untuk antarmuka yang canggih.

Saya membuat ini dengan SVG (ditata dengan CSS):

Dan berikut's yang Memetik untuk menunjukkan.

7

0

Komentar (0)

Jhonatan Acelas Arevalo

Sumber Tidak AMP-versi Sunting

Hal ini tidak saya sendiri tetapi bekerja cukup baik dan terlihat elegan, hanya bekerja dengan css dan anda dapat perzonalize itu lebih lanjut. Sumber http://jsfiddle.net/Misiu/y1Lo3qh1/

var i = 1;
$('.progress .circle').removeClass().addClass('circle');
$('.progress .bar').removeClass().addClass('bar');
setInterval(function () {
    $('.progress .circle:nth-of-type(' + i + ')').addClass('active');
    $('.progress .circle:nth-of-type(' + (i - 1) + ')').removeClass('active').addClass('done');
    $('.progress .circle:nth-of-type(' + (i - 1) + ') .label').html('✓');
    $('.progress .bar:nth-of-type(' + (i - 1) + ')').addClass('active');
    $('.progress .bar:nth-of-type(' + (i - 2) + ')').removeClass('active').addClass('done');
    i++;
    if (i == 8) {
        $('.progress .circle').removeClass().addClass('circle');
        $('.progress .bar').removeClass().addClass('bar');
        i = 1;
    }
}, 1000);

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Open Sans";
}
/* Form Progress */

.progress {

  margin: 20px auto;
  text-align: center;
  padding-bottom: 80px;
}
.progress .circle,
.progress .bar {
  display: inline-block;
  background: #fff;
  width: 40px;
  height: 40px;
  border-radius: 40px;
  border: 1px solid #d5d5da;
  vertical-align:top;
}
.progress .bar {
  position: relative;
  width: 80px;
  height: 6px;
  margin: 0 -5px 17px -5px;
  border-left: none;
  border-right: none;
  border-radius: 0;
  top:16px;
  vertical-align:top
}
.progress .circle .label {
  display: inline-block;
  width: 32px;
  height: 32px;
  line-height: 32px;
  border-radius: 32px;
  margin-top: 3px;
  color: #b5b5ba;
  font-size: 17px;
}
.progress .circle .title {
  color: #b5b5ba;
  font-size: 13px;
  line-height: 18px;
  margin-left: -30px;
  display: block;
  width: 100px;
  margin-top: 5px;
}
/* Done / Active */

.progress .bar.done,
.progress .circle.done {
  background: #eee;
}
.progress .bar.active {
  background: linear-gradient(to right, #EEE 40%, #FFF 60%);
}
.progress .circle.done .label {
  color: #FFF;
  background: #8bc435;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}
.progress .circle.done .title {
  color: #444;
}
.progress .circle.active .label {
  color: #FFF;
  background: #0c95be;
  box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}
.progress .circle.active .title {
  color: #0c95be;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="progress">
  <div class="circle done"> <span class="label">1</span>
    <span class="title">Order</span>

  </div> <span class="bar done"></span>

  <div class="circle done"> <span class="label">2</span>
    <span class="title">Address</span>

  </div> <span class="bar active"></span>

  <div class="circle active"> <span class="label">3</span>
    <span class="title">Payment</span>

  </div> <span class="bar"></span>

  <div class="circle"> <span class="label">4</span>
    <span class="title">Review</span>

  </div> <span class="bar"></span>

  <div class="circle"> <span class="label">5</span>
    <span class="title">Finish</span>

  </div>
</div>
<div class="progress">
  <div class="circle done"> <span class="label">1</span>
    <span class="title">Order informations</span>

  </div> <span class="bar active"></span>

  <div class="circle active"> <span class="label">2</span>
    <span class="title">Order review</span>

  </div> <span class="bar"></span>

  <div class="circle"> <span class="label">3</span>
    <span class="title">Finish</span>

  </div>
</div>

6

0

Komentar (1)

Blake Mann

Sumber Tidak AMP-versi Sunting

Nah, itu's ton markup, tapi anda bisa melakukan sesuatu seperti ini:

Gunakan display: table-cell; seperti itu akan secara otomatis menyesuaikan lebar item untuk mengisi ruang.

Kemudian, memiliki satu set unsur-unsur lingkaran, dan sebuah set elemen garis. Garis-unsur yang hanya memiliki batas bawah pada mereka, dan lingkaran unsur-unsur yang hanya relatif berada di bawah sejajar dengan garis.

Perhatikan bahwa lingkaran harus memiliki ekstra wadah, jika table-cell akan meregangkan semua kalangan untuk ketinggian yang sama, dan anda don't ingin yang itu. Ini akan memerlukan anda untuk mengatur lebar dari wadah tersebut untuk menjadi 1px, yang akan memaksa untuk ukuran itu's anak.

Check out demo ini:

http://jsfiddle.net/Sjdm4/

1

0

Komentar (1)

Smakosh

Sumber Tidak AMP-versi Sunting

Contoh yang saya buat berdasarkan jawaban: https://codepen.io/Smakosh/pen/ZvvyMg

Pug
ul
  li.list.active 1
  li.list 2
  li.list 3
  li.list 4
Sass
ul
  list-style: none
    li
      display: inline-block
      width: 4rem
      height: 4rem
      line-height: 4rem
      border-radius: 100%
      background: #d8d8d8
      margin-right: 2rem
      position: relative
      &:first-child
        margin-left: unset
        &:before
          display: none
      &:before
        content: ''
        width: 2.4rem
        background-color: #d8d8d8
        height: 2px
        position: absolute
        top: 2rem
        right: 3.9rem
    .active
      background: #03A9F4
      color: #fff
      &:before
        background-color: #03A9F4

1

0

Komentar (0)

Trace

Sumber Tidak AMP-versi Sunting

Saya menggunakan Bootstrap 4 dan FontAwesome untuk membuat versi saya ini.

Berikut ini's kode pen: [link]https://codepen.io/tr4c355/pen/roBjWV

HTML & CSS:


.line-btw { 
  height:3px;
  width:100px;
  background-color: orange;
}

<div class="fa-stack fa-lg text-center">

  <div class="">1</div>
</div>
<div class="line-btw"></div>
<div class="fa-stack fa-lg text-center" style="">

  <div style="">2</div>
</div>
<div class="line-btw"></div>
<div class="fa-stack fa-lg text-center" style="">

  <div class="">3</div>
</div>

Trace

Jawaban edit 7 Desember 2018 в 4:34

0

Komentar (0)

bookcasey · Accepted Answer · 2013-10-29T03:51:37+00:00

Anda dapat mencapai efek ini dengan tidak ada tambahan markup menggunakan pseudo-elemen dan adjacent sibling selector (~):

li {
  width: 2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  border-radius: 1em;
  background: dodgerblue;
  margin: 0 1em;
  display: inline-block;
  color: white;
  position: relative;
}

li::before{
  content: '';
  position: absolute;
  top: .9em;
  left: -4em;
  width: 4em;
  height: .2em;
  background: dodgerblue;
  z-index: -1;
}

li:first-child::before {
  display: none;
}

.active {
  background: dodgerblue;
}

.active ~ li {
  background: lightblue;
}

.active ~ li::before {
  background: lightblue;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li class="active">4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
</ul>

Demo di CodePen