CODEWITHSUNDEEP
htmlcss
HD..
HD..

Reputation: 1476

how to create a div with triangle shape with attached another div

here I created with html element using 2 div but I am not able to create a triangle-shaped div like I really required. I have attached an image.

Here is the html code:

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

and 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/

output image:

enter image description here

Upvotes: 2

Views: 2349

Answers (1)

lupos
lupos

Reputation: 374

pseudo elements and css triangles can do the job 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;
}

Didn't do the whole thing for you, cause where's the fun in that? But should get you on the right path. Let me know if you need more help.

Upvotes: 4

Related Questions