how to create a triangle and square with ccs only?

Question

I want to create a square and a triangle on the top of it with css only, so

I could write some dynamic text in the triangle
It would be easy to dynamically set the triangle color with css at runtime.

possible duplicate of [How does this CSS triangle shape work?](http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work) — Jon, Apr 20 '12 at 08:14
Check to this and create any shape http://css-tricks.com/examples/ShapesOfCSS/ — Rohit Azad Malik, Apr 20 '12 at 09:03

score 0 · Accepted Answer · answered Apr 20 '12 at 08:24

Here's one way of doing it:

HTML

<div class="container">
    <div class="content">Hello World</div>
    <div class="triangle"></div>
</div>

CSS

.container{
    border:1px solid #000;
    position:relative;
}
.content{
    z-index:500;
    position:absolute;
    top:230px;
    left:120px;
    color:#fff;
}
.triangle{
    border-color: #fff #fff red #fff;
    border-width:160px;
    border-style:solid;
    width:0;
    height:0;
    position:absolute;
    top:0;
    left:0;
    z-index:2;
}

how to create a triangle and square with ccs only?

1 Answers1