如何编写本节代码，有什么想法？

Question

有人知道怎么编码吗？

我尝试使用：before，table，ul。对我来说这是不可能的。

我的代码：

.container {
  max-width: 960px;
  margin: 0 auto;
}

ul {
  padding-bottom: 50px;
  list-style-type: none;
}

li {
  position: relative;
}

li.content:before {
  content: "2012";
  position: absolute;
  left: 0;
  bottom: 0;
  display: inline-block;
  background-color: aqua;
  transform: rotate(90deg);
  overflow: hidden;
  padding: 20px 140px;
}

li.content {}

<ul class="container">
  <li class="content">
    <strong>Masters Degree</strong><br> Dhaka University<br>
    <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.A wonderful
      serenity has taken possession of my entire soul, like these sweet mornings.</p>
  </li>
</ul>

Answer 1

这里有一个简单的想法，您可以详细说明：

.timeline {
  margin: 0;
  padding: 0 80px;
  background: grey;
  list-style: none;
}

.timeline li {
  background: #fff;
  padding: 50px;
  position: relative;
  border-bottom:1px solid;
  border-top:1px solid;
  box-shadow:0 20px 0 #fff;
  margin-bottom:20px;
}
.timeline li:nth-child(even) {
  text-align:right;
}
.timeline li:before {
  content: attr(data-date);
  color: #fff;
  writing-mode: tb-rl;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 80px;
  padding:10px 0;
  background: blue;
}

.timeline li:nth-child(even)::before {
  left: 100%;
  right: auto;
}
.timeline li:after {
  content:"";
  position:absolute;
  top:20px;
  left:0;
  width:0;
  right:0;
  border-left:10px solid blue;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}
.timeline li:nth-child(even)::after {
  border-right:10px solid blue;
  border-left:none;
  right:0;
  left:auto;
}
* {
  box-sizing: border-box;
}

<ul class="timeline">
  <li data-date="2012 - 2018">Some text here</li>
  <li data-date="2012 - 2018">Some text here</li>
  <li data-date="2012 - 2018">Some text here</li>
</ul>