如何创建一个三角形的div与附加另一个div

Question

这里我使用2 div创建了html元素，但是我无法像我真正需要的那样创建一个三角形的div。我附上了一张图片。

这是html代码：

<div style="background-color:#999999;margin-bottom:20px;"> 
   <div class="activeHeader h4Bold" style="width:40%;display:inline-block"><span class="h3Bold" style="margin-right:12px;color:#ffffff!important">1</span> Define Finished Product and Tracability Workflow</div>

    <div class="inactive h4Bold" style="width:40%;display:inline-block"><span class="h3Bold" style="margin-right:12px;color:#000000!important">2</span> 
    </div>
</div>

和css：

.activeHeader
{
    padding:9px 24px 9px 12px;
    background-color:#000000;
    color:#ffffff;
}
.inactive
{
    padding:9px 24px 9px 12px;
    background-color:#cccccc;
    color:#000000;
}

的jsfiddle http://jsfiddle.net/prashantbirajdar123/YM76v/

输出图片：

Answer 1

伪元素和CSS三角形可以完成工作http://jsfiddle.net/YM76v/1/

.activeHeader:after{
    content: ""; //makes it appear
    position: absolute; 
    top: 0;
    left: 100%; //makes it stick off the right hand side
    width: 0; 
    height: 0; 
    //following values are same as half total height to get the correct shape for the triangle.
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    border-left: 18px solid black;
}

没有为你做整件事，因为那里的乐趣在哪里？但是应该让你走上正确的道路。如果您需要更多帮助，请告诉我。