CSS의 곡선 타임라인

이 기사에서는 나중에 포트폴리오에서 작업 기록이나 원하는 다른 것을 표시하는 데 사용할 수 있는 곡선형 타임라인을 웹사이트에 구축할 것입니다. 우리가 무엇을 만들고 있는지 먼저 살펴 보겠습니다.



이제 우리가 무엇을 하는지 보았으므로 코드를 살펴보겠습니다.

HTML

<div class="timeline">
  <div class="outer">
    <!-- .... card before this -->

    <div class="card">
      <div class="info">
        <h3 class="title">Title 1</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat.
        </p>
      </div>
    </div>
    <!-- ..... you can add more div with "card" class -->
  </div>
</div>

HTML 코드에서 timeline 클래스는 기본 컨테이너이고 outer 클래스는 모든 카드의 래퍼입니다. 그런 다음 데이터를 추가하는 card가 있습니다.

이제 CSS를 살펴보겠습니다.

CSS

/* Timeline Container */
.timeline {
  background: #212121;
  margin: 20px auto;
  padding: 20px;
}

/* Card container */
.card {
  position: relative;
  max-width: 400px;
}

/* setting padding based on even or odd */
.card:nth-child(odd) {
  padding: 30px 0 30px 30px;
}
.card:nth-child(even) {
  padding: 30px 30px 30px 0;
}
/* Global ::before */
.card::before {
  content: "";
  position: absolute;
  width: 50%;
  border: solid orangered;
}

/* Setting the border of top, bottom, left */
.card:nth-child(odd)::before {
  left: 0px;
  top: -4.5px;
  bottom: -4.5px;
  border-width: 5px 0 5px 5px;
  border-radius: 50px 0 0 50px;
}

/* Setting the top and bottom to "-5px" because earlier it was out of a pixel in mobile devices */
@media only screen and (max-width: 400px) {
  .card:nth-child(odd)::before {
    top: -5px;
    bottom: -5px;
  }
}

/* Setting the border of top, bottom, right */
.card:nth-child(even)::before {
  right: 0;
  top: 0;
  bottom: 0;
  border-width: 5px 5px 5px 0;
  border-radius: 0 50px 50px 0;
}

/* Removing the border if it is the first card */
.card:first-child::before {
  border-top: 0;
  border-top-left-radius: 0;
}

/* Removing the border if it is the last card  and it's odd */
.card:last-child:nth-child(odd)::before {
  border-bottom: 0;
  border-bottom-left-radius: 0;
}

/* Removing the border if it is the last card  and it's even */
.card:last-child:nth-child(even)::before {
  border-bottom: 0;
  border-bottom-right-radius: 0;
}

/* Information about the timeline */
.info {
  display: flex;
  flex-direction: column;
  background: #333;
  color: gray;
  border-radius: 10px;
  padding: 10px;
}

/* Title of the card */
.title {
  color: orangered;
  position: relative;
}

/* Timeline dot  */
.title::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 999px;
  border: 3px solid orangered;
}

/* text right if the card is even  */
.card:nth-child(even) > .info > .title {
  text-align: right;
}

/* setting dot to the left if the card is odd */
.card:nth-child(odd) > .info > .title::before {
  left: -45px;
}

/* setting dot to the right if the card is odd */
.card:nth-child(even) > .info > .title::before {
  right: -45px;
}

코드펜은 여기

css-timeline-with-curves에서 Jatin(@j471n)의 PenCodePen을 참조하십시오.

결론

이것은 시작에 불과하며 다음 수준으로 사용자 정의할 수 있으며 제안 사항이 있으면 아래에 댓글을 달기 위해 향후 기사에서 할 것입니다.

You can now extend your support by buying me a Coffee.😊👇