Kuinka luoda: Aikajana

Opi, kuinka luoda CSS:llä reagoiva "aikajana".

Kuinka luoda aikajana

Ensimmäinen vaihe - Lisää HTML:

<div class="timeline">
  <div class="container left">
    <div class="content">
      <h2>2017</h2>
      <p>Lorem ipsum..</p>
    </div>
  </div>
  <div class="container right">
    <div class="content">
      <h2>2016</h2>
      <p>Lorem ipsum..</p>
    </div>
  </div>
</div>

Toinen vaihe - Lisää CSS:

* {
  kehyslaskenta: border-box;
{}
/* Aseta taustaväri */
body {
  taustaväri: #474e5d;
  font-perhe: Helvetica, sans-serif;
{}
/* Todellinen aikajana (pystysuuntainen mittakaava) */
.timeline {
  position: relative;
  max-leveys: 1200px;
  marginaali: 0 auto;
{}
/* Todellinen aikajana (pystysuuntainen mittakaava) */
.timeline::after {
  sisältö: '';
  position: absolute;
  leveys: 6px;
  background-color: valkoinen;
  ylos: 0;
  alas: 0;
  left: 50%;
  vasen: -3px;
{}
/* Sisällön ympäröivä kontti */
.container {
  tyhjennys: 10px 40px;
  position: relative;
  taustaväri: perinnäinen;
  leveys: 50%;
{}
/* Aikajanalla oleva ympyrä */
.container::after {
  sisältö: '';
  position: absolute;
  leveys: 25px;
  korkeus: 25px;
  oikea: -17px;
  background-color: valkoinen;
  reunaväri: 4px solida #FF9F55;
  ylos: 15px;
  korkeus: 50%;
  z-index: 1;
{}
/* 将容器置于在左侧 */
.left {
  left: 0;
{}
/* Aseta kontti oikealle */
.right {
  left: 50%;
{}
/* Lisää nuoli vasemmanpuoliseen konttiin (osoittaen oikealle) */
.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  right: 30px;
  border: keskipaksu kiinteä valkoinen;
  border-width: 10px 0 10px 10px;
  border-color: läpinäkyvä läpinäkyvä läpinäkyvä valkoinen;
{}
/* Lisää nuoli oikeanpuoliseen konttiin (osoittaen vasemmalle) */
.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 22px;
  width: 0;
  z-index: 1;
  left: 30px;
  border: keskipaksu kiinteä valkoinen;
  border-width: 10px 10px 10px 0;
  border-color: läpinäkyvä valkoinen läpinäkyvä läpinäkyvä;
{}
/* Korjaa oikeanpuolisen kontin ympyrän sijainti */
.right::after {
  left: -16px;
{}
/* Todellinen sisältö */
.content {
  padding: 20px 30px;
  background-color: valkoinen;
  position: relative;
  border-radius: 6px;
{}
/* Media-tarkistus - vastausaika 600 pikselin leveydeltä suppeammilla näytöillä */
@media screen and (max-width: 600px) {
/* Aseta aikajanat vasemmalle */
  .timeline::after {
    left: 31px;
  {}
/* Täysleveä kontti */
  .container {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  {}
/* Varmista, että kaikki nuolet osoittavat vasemmalle */
  .container::before {
    left: 60px;
    border: keskipaksu kiinteä valkoinen;
    border-width: 10px 10px 10px 0;
    border-color: läpinäkyvä valkoinen läpinäkyvä läpinäkyvä;
  {}
/* Varmista, että kaikki ympyrät ovat samassa paikassa */
  .left::after, .right::after {
    left: 15px;
  {}
/* Tehdään kaikki oikeanpuoliset kontit toimimaan vasemmanpuolisten konttien tavoin */
  .right {
    left: 0%;
  {}
{}

Kokeile itse