Kevin Powell - Community•11mo ago

Need help implementing the following design

Hello everyone! As the title suggests, I would need some help implementing the attached image/design or at least guide me to the correct solution. I can't seem to wrap my head around on how I would achieve it. I thought about using a list but I fall into endless loop of thinking how to achieve the vertical bar with rounded corners, let alone those "bullets" connecting to it. I know that for the dropdown text the best would be to use dialogue/summary elements. Any help/tips would be appreciated as I have never seen or done something like this.

3 Replies

JaViLuMa•11mo ago

So far, I managed to do the following (it's not per design yet, I am just experimenting):

<ul class="timeline">
  <li>
    <details><summary>Descripton 1</summary><p>Title 1</p></details>
  </li>
  <li>
    <details><summary>Descripton 2</summary><p>Title 2</p></details>
  </li>
  <li>
    <details><summary>Descripton 3</summary><p>Title 3</p></details>
  </li>
  <li>
    <details><summary>Descripton 4</summary><p>Title 4</p></details>
  </li>
</ul>

<ul class="timeline">
  <li>
    <details><summary>Descripton 1</summary><p>Title 1</p></details>
  </li>
  <li>
    <details><summary>Descripton 2</summary><p>Title 2</p></details>
  </li>
  <li>
    <details><summary>Descripton 3</summary><p>Title 3</p></details>
  </li>
  <li>
    <details><summary>Descripton 4</summary><p>Title 4</p></details>
  </li>
</ul>

With the following CSS:

$border: #666E98;
$border-hover: #aaa;
$bg-hover: #eee;
$text: #888;
$text-hover: #000;
$ident: 50px;
$left: -($ident);

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
  padding:50px;
  font-family:helvetica, arial,sans-serif;
}
ul {
  margin-left:$ident;
}

.timeline {
  li {
    list-style-type: none;
    margin:10px 0 10px 10px;
    position: relative;
    &:before {
      content: "";
      position: absolute;
      top:-10px;
      left:$left;
      border-left: 2px solid $border;
      border-bottom:2px solid $border;
      width:$ident;
      height:20px;
    }
    &:first-child:before {
      display: none;
    }
    &:last-child:before {
      border-radius: 0 0 0 10px;
    }
    &:after {
      position:absolute;
      content:"";
      top:10px;
      left:$left;
      border-left: 2px solid $border;
      border-top:2px solid $border;
      width:$ident;
      height:100%;
    }
    &:first-child:after {
      border-radius: 10px 0 0 0;
    }
    &:last-child:after {
      display:none;
    }
    details {
      display:block;
      border: 1px solid $border;
      color:$text;
      text-decoration:none;
      margin-left: 2px;
    }
  }
}

$border: #666E98;
$border-hover: #aaa;
$bg-hover: #eee;
$text: #888;
$text-hover: #000;
$ident: 50px;
$left: -($ident);

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
  padding:50px;
  font-family:helvetica, arial,sans-serif;
}
ul {
  margin-left:$ident;
}

.timeline {
  li {
    list-style-type: none;
    margin:10px 0 10px 10px;
    position: relative;
    &:before {
      content: "";
      position: absolute;
      top:-10px;
      left:$left;
      border-left: 2px solid $border;
      border-bottom:2px solid $border;
      width:$ident;
      height:20px;
    }
    &:first-child:before {
      display: none;
    }
    &:last-child:before {
      border-radius: 0 0 0 10px;
    }
    &:after {
      position:absolute;
      content:"";
      top:10px;
      left:$left;
      border-left: 2px solid $border;
      border-top:2px solid $border;
      width:$ident;
      height:100%;
    }
    &:first-child:after {
      border-radius: 10px 0 0 0;
    }
    &:last-child:after {
      display:none;
    }
    details {
      display:block;
      border: 1px solid $border;
      color:$text;
      text-decoration:none;
      margin-left: 2px;
    }
  }
}

But there is a slight gradient that is hard to see on the image on the horizontal lines that goes from left to right, how can I achieve that? I know how I would add the little circle at the end, but if there is a way to make the current CSS better/more robust, I would appreciate it a lot

Chris Bolson•11mo ago

I would say that what you have is pretty much there. It is complicated by the need for the left-hand borders to expand with the contents and you have achieved this. As for the gradient, borders do accept linear-gradients but I believe there is an issue with the border radius . I have copied your code into a codepen as it is easier to see what is going on if the code is implemented somewhere. I haven't changed anything other than how the borders are defined. By using a background linear gradient and a mask I think I have managed to achieve the border gradiente effect that you are looking for. If not, it might at least help you a bit. https://codepen.io/cbolson/pen/OJaKwbe

JaViLuMa•11mo ago

@Chris thank you a lot!!! 😄 this will definitely help!!!

Gaming

Programming

Need help implementing the following design