How do I add multiple triangles to the same element?

Question

I have a created a timeline of milestones that each have a circular image (border-radius: 100%). I am giving a css arrow to each .milestone-image-holder element using the :before and :after pseudo elements. I would like to give an arrow to top and bottom of the element, but it seems that I can only do top or bottom, not top and bottom (two css arrows).

Here is my 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

That css will add an css arrow to the top, and changing bottom: 99% to top: 99%, and border-bottom-color: #ee3b34 to border-top-color: #ee3b34 will add the arrow to the bottom, but I cannot have both arrows at the same time. Is it possible?

A Jsfiddle would be useful (with image) but I don't se ethis as unsurmountable. In idea of what this is supposed to look like would help enormously. — Paulie_D
– Paulie_D, Commented Jul 24, 2014 at 15:20
You cannot set top and bottom and height, one of those needs to remain flexible. Create a 2nd class for your bottom arrow then apply both classes. — Wobbles
– Wobbles, Commented Jul 24, 2014 at 15:21
@nitsuj Check the updated answer please!!! It has a image preview too!! — Praveen Kumar Purushothaman
– Praveen Kumar Purushothaman, Commented Jul 24, 2014 at 15:25
img-holder:after and img-holder:before are using the same values in your css. you must give different values for :before, like: bottom:0%; and switch borders to be down arrow — Aleksandar
– Aleksandar, Commented Jul 24, 2014 at 15:29

Praveen Kumar Purushothaman · Accepted Answer · 2014-07-24 15:46:39Z

1

Try this:

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

Is this what you are expecting?

Fiddle: http://jsfiddle.net/praveenscience/jcS79/2/

Removing the arrows on first and last child!

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

Fiddle: http://jsfiddle.net/praveenscience/jcS79/9/

edited Jul 24, 2014 at 15:46

answered Jul 24, 2014 at 15:22

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

nitsuj Over a year ago

Yes, that is what I have, but it should have the arrow on the bottom (pointing down) as well.

Praveen Kumar Purushothaman Over a year ago

@nitsuj Please check the updated answer. Sorry, I posted the wrong fiddle!!! :( Check the version 2... :D

TylerH Over a year ago

@nitsuj simply compare your JSFiddle code to his :-)

Praveen Kumar Purushothaman Over a year ago

@nitsuj The difference I have put in the answer. I used after with bottom, instead of top and adjusted the border-width. That's all! :)

Praveen Kumar Purushothaman Over a year ago

@nitsuj Make sure you check the second version. The image is wrong! :) jsfiddle.net/praveenscience/jcS79/2

|

Paulie_D · Accepted Answer · 2014-07-24 15:43:25Z

0

JSfiddle Demo

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

edited Jul 24, 2014 at 15:43

answered Jul 24, 2014 at 15:37

Paulie_D

116k13 gold badges168 silver badges185 bronze badges

2 Comments

Paulie_D Over a year ago

Fixed,,,forgot the unprefixed transform

nitsuj Over a year ago

Thank you! It looks like this worked in your fiddle, but I already implemented Praveen's solution, and it worked too!

Collectives™ on Stack Overflow

How do I add multiple triangles to the same element?

2 Answers 2

Fiddle: http://jsfiddle.net/praveenscience/jcS79/2/

Fiddle: http://jsfiddle.net/praveenscience/jcS79/9/

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Fiddle: http://jsfiddle.net/praveenscience/jcS79/2/

Fiddle: http://jsfiddle.net/praveenscience/jcS79/9/

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related