Bootstrap响应垂直时间轴与图标和图像占位符

Question

我需要帮助来根据图像使用图标和占位符来实现垂直时间轴。

我正在使用代码段here，但我无法使用css3克服时间轴设计。

感谢帮助。

Answer 1

问题似乎是你想要的四分之一圆圈边界。

这可以通过在元素上设置简单的旋转变换然后以其他方式旋转任何内容来实现。

然后可以单独设置边框颜色。

html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
body {
  text-align: center;
}
div {
  display: inline-block;
  padding: 1em;
  border-style: solid;
  border-width: 2px;
  border-color: grey transparent;
  margin: 1em;
  border-radius: 50%;
  transform: rotate(45deg);
  font-size: 36px
}
div i {
  transform: rotate(-45deg);
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<div>
  <i class="fa fa-suitcase"></i>
</div>

Answer 2

 .glyphicon {
    position: absolute;
    top: 50%;
    left: 50%;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    -webkit-font-smoothing: antialiased;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -moz-osx-font-smoothing: grayscale;
    transform: translate(-50%, -50%);
}