Css 如何向同一元素添加多个三角形？

我创建了一个里程碑时间表，每个里程碑都有一个圆形图像

（边框半径：100%）

。我使用：before和：after伪元素给每个.milestone图像持有者元素一个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将在顶部添加一个css箭头，将

底部：99%

更改为

顶部：99%

，

边框底部颜色：#ee3b34

更改为

边框顶部颜色：#ee3b34

将在底部添加箭头，但我不能同时拥有两个箭头。有可能吗？

试试这个：

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;
}

这是你期待的吗

小提琴：

---

移除第一个和最后一个孩子身上的箭头

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

小提琴：

简化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;
}

---

JSFIDLE（对于图像）是有用的，但我不认为这是不可数的。“如果你想知道这应该是什么样子，那会有很大的帮助。”Paulie_D补充道，“你不能设置顶部、底部和高度，其中一个需要保持灵活性。”。为下箭头创建第二个类，然后应用这两个类。@nitsuj请检查更新的答案！！！它也有一个图像预览<代码>img支架：在之后和img支架：在之前在css中使用相同的值。您必须为

：before

指定不同的值，例如：

bottom:0%并将边框切换为向下箭头是的，这就是我所拥有的，但它的底部也应该有箭头（指向下方）。@nitsuj请检查更新的答案。”。对不起，我贴错小提琴了！！！：（检查版本2…：D@nitsuj只需将您的JSFIDLE代码与他的：-）@nitsuj代码进行比较，就可以看出我在答案中给出的差异。我将after与
底部
一起使用，而不是
顶部
，并调整了
边框宽度
。就这些！：）@是的，就是这样！非常感谢。修好了，忘了修好了，谢谢！看起来这在你的小提琴中起了作用，但我已经实现了Praveen的解决方案，而且它也起了作用！
* {
    -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;
}