如何将多个三角形添加到同一元素？

Question

我创建了里程碑的时间轴，每个里程碑都有一个圆形图像(border-radius: 100%)。我使用：before 和：after 伪元素为每个.milestone-image-holder元素提供一个css箭头。我想在元素的顶部和底部给出一个箭头，但似乎我只能做顶部或底部，而不是顶部和底部（两个css箭头）

这是我的HTML：

<ul class="milestones">
   <li class="milestone-left">
      <div class="milestone-img-holder">
         <img src="/assets/images/page/about-us/our-history/timeline_2011.jpg" />
      </div>
      <h5>2011</h5>
      <p>
         Sample text
      </p>
   </li>
</ul>

CSS：

ul.milestones li.milestone-left .milestone-img-holder {
    position: relative;
    margin-left: -80px;
    float: left;
}

ul.milestones li.milestone-right .milestone-img-holder {
    position: relative;
    margin-right: -80px;
    float: right;
}

ul.milestones .milestone-img-holder:after, ul.milestones .milestone-img-holder:before {
        bottom: 98%;
        left: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
}

ul.milestones .milestone-img-holder:after { 
        border-color: rgba(238, 59, 52, 0);
        border-bottom-color: #EE3B34;
        border-width: 3px;
        margin-left: -3px;
}

ul.milestones .milestone-img-holder:before {
        border-color: rgba(238, 59, 52, 0);
        border-bottom-color: #EE3B34;
        border-width: 9px;
        margin-left: -9px;
}


ul.milestones img {
    position: relative;
    width: 10em;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    border: 3px solid #ee3b34;
    background: #CCC;
}

JSFiddle

该css会在顶部添加一个css箭头，将bottom: 99%更改为top: 99%，将border-bottom-color: #ee3b34更改为border-top-color: #ee3b34，将箭头添加到底部，但我不能同时拥有两个箭头。有可能吗？

Answer 1

试试这个：

ul.milestones .milestone-img-holder:after {
    border-color: rgba(238, 59, 52, 0);
    border-top-color: #EE3B34;
    border-width: 6px;
    margin-left: -6px;
    top: auto;
    bottom: -6px;
}

这是你期待的吗？

小提琴：http://jsfiddle.net/praveenscience/jcS79/2/

---

删除第一个和最后一个孩子的箭头！

ul.milestones li:first-child .milestone-img-holder:before,
ul.milestones li:last-child .milestone-img-holder:after {display: none;}

小提琴：http://jsfiddle.net/praveenscience/jcS79/9/

Answer 2

JSfiddle Demo

简化CSS

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.milestones {
    margin: 50px;
}
ul.milestones li.milestone-left .milestone-img-holder {
    position: relative;
    display: inline-block;
    float: left;
}
ul.milestones .milestone-img-holder:after, ul.milestones .milestone-img-holder:before {
    left: 50%;
    border: solid transparent;
    content:" ";
    height: 0;
    width: 0;
    border:6px solid transparent;
    position: absolute;
    pointer-events: none;
}
ul.milestones .milestone-img-holder:before {
    /* the top one */
    border-bottom-color: #EE3B34;
    top:0;
    -webkit-transform:translate(-50%, -100%);
     transform:translate(-50%, -100%);
}
ul.milestones .milestone-img-holder:after {
    /*the bottom one */
    top:100%;
    border-top-color: #EE3B34;
    -webkit-transform:translate(-50%, 100%);
     transform:translate(-50%, 0%);
}
ul.milestones img {
    position: relative;
    width: 10em;
    display: block;
    border-radius: 100%;
    border: 3px solid #ee3b34;
    background: #CCC;
}