如何创建一个三角形的 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;
}

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