Coding a shape with CSS - css

Question

I've created a shape purely by CSS. The following link includes my work.
http://jsfiddle.net/kaHek/119/
CSS:
#applicationStatus {
position: relative;
width: 630px;
height: 140px;
top: 20px;
left: 40px; }
ul.applicationStatus {
list-style: none; }
li.applicationStatus, li.applicationStatusGood, li.applicationStatusNoGood {
height: 140px;
background-color: #767676;
display: inline-block;
/* Dirty IE Hack */
zoom: 1;
*display: inline;
margin-right: 30px;
padding: 10px;
color: white;
font-size: 18px;
text-align: center;
line-height: 150px;
/* vertical-align: middle; */ }
li.applicationStatus:after, li.applicationStatusGood:after, li.applicationStatusNoGood:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 80px solid transparent;
border-left: 30px solid #77a942;
border-bottom: 80px solid transparent;
margin: -10px 90px 0 0px; }
HTML
<div id="applicationStatus">
<ul>
<li class="applicationStatus">Başvuru Alındı</li>
<li class="applicationStatusGood">Dil Sınavı</li>
<li class="applicationStatusNoGood">Sözlü Mülakat</li>
<li class="applicationStatus">Hibe</li>
</ul>
</div>
What I'm trying to achieve is the following:
I'm struggling with aligning the arrow part of the image. I created that part with :after pseudo-element with the help of css3shapes.com but I can't seem to align it properly.
Setting the margin value of the after selector works for vertical positioning but not for horizontal positioning.
What should I do?

Answer 1

Check the Jsfiddle
http://jsfiddle.net/arunberti/kaHek/120/
margin: -10px 90px 0 10px;

Answer 2

Margin Rules:
Margin: 25px 50px 75px 100px;
top margin is 25px
right margin is 50px
bottom margin is 75px
left margin is 100px
In your case, this works fine: margin: -10px 90px 0px 10px;
Make sure that last value of this should equal with your padding: 10px; in li.applicationStatus, li.applicationStatusGood, li.applicationStatusNoGood method.

Answer 3

Alternatively, you can do this:
fiddle
Relavant code:
li {
position:relative;
}
li:after {
right:-30px; /* width of element */
top:0;
}

Answer 4

Check out this code you can achieve exactly what you are seeking for...! :)
jsfiddle
Code:
HTML:
<div id="css3">
<ul>
<li class="css3">HTML5/CSS3</li>
<li class="css3">Shapes</li>
<li class="css3">Hello World!</li>
</ul>
</div>
CSS:
#css3 {
position: relative;
width: 630px;
height: 140px;
top: 20px;
left: 40px;
}
ul.css3 {
list-style: none;
}
li.css3 {
height: 140px;
background-color: #76a942;
display: inline-block;
/* Dirty IE Hack */
zoom: 1;
padding: 10px;
color: #fff;
font-size: 1em;
text-align: center;
line-height: 150px;
margin-left: 50px;
}
li.css3:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 40px solid #76a942;
border-top: 80px solid transparent;
border-bottom: 80px solid transparent;
margin: -10px 90px 0 10px;
}