CSS Triangles sample

by dipish

HTML

<h1>Css triangles</h1>

<p> Top: <div class="triangle t"></div></p>
<p> Bottom: <div class="triangle b"></div></p>
<p> Right: <div class="triangle r"></div></p>
<p> Left: <div class="triangle l"></div></p>

CSS

/* Setup */
p {
    margin-top: 30px;
}


/* Essential */
.triangle {
    border-style:solid;
    border-width:15px;
    height:0px;
    width:0px;
}

.triangle.l {
    border-color: transparent red transparent transparent;
}

.triangle.r {
    border-color: transparent transparent transparent blue;
}

.triangle.t {
    border-color: transparent transparent green transparent;
}

.triangle.b {
    border-color: magenta transparent transparent transparent;
}