HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>

</div>
                            <div class="tt">

</div>
                        </div>
                        <div class="g-wrap">
                            <div class="tt">

</div>
                            <div class="pp">

</div>
                        </div>
                        <div class="g-wrap">
                            <div class="pp">

</div>
                            <div class="tt">

</div>
                        </div>
                        <div class="g-wrap">
                            <div class="tt">

</div>
                            <div class="pp">

</div>
                        </div>
                    </div>
  </div>

</body>
</html>

.triangles {
    margin: 0 auto;
}

.feature .geometry {
    display: inline-block;
    overflow: hidden;
}

.feature .geometry .g-wrap {
    display: block;
    float: left;
    width: 190px;
    margin: 0 10px;
}

.feature .geometry .g-wrap.reverse {
    margin-left: -80px;
}

.feature .geometry .g-wrap.reverse .pp {
    float: left;
    margin-left: -30px;
}

.feature .geometry .g-wrap.reverse .tt {
    position: relative;
    z-index: 3;
    text-align: center;
    color: white;
    font-size: 12px;
    font-weight: 700;
    width: 0;
    height: 0;
    border-style: inset;
    border-width: 0 95px 135px 95px;
    border-color: transparent transparent #265d7b transparent;
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    margin-top: 100px;
}

.feature .geometry .g-wrap.reverse .tt p {
    text-align: center;
    top: 35px;
    left: -64px;
    position: relative;
    width: 127px;
    height: 93px;
    margin: 0;
    font-size: 13px;
    transform: rotate(0deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

.feature .geometry .g-wrap.reverse .tt img {
    margin-top: 10px;
}

.feature .geometry .g-wrap.first {
    margin-top: 10px;
}

.feature .geometry .g-wrap.last {
    margin-bottom: 10px;
}

.feature .geometry .g-wrap .pp {
    width: 190px;
    height: 100px;
    -webkit-transform: skew(-32deg);
    -moz-transform: skew(-32deg);
    -o-transform: skew(-32deg);
    background: white;
    margin-left: 30px;
    padding: 5px;
}

.feature .geometry .g-wrap .pp p {
    -webkit-transform: skew(32deg);
    -moz-transform: skew(32deg);
    -o-transform: skew(32deg);
    font-size: 13px;
}

.feature .geometry .g-wrap .tt {
    position: relative;
    z-index: 3;
    text-align: center;
    color: white;
    font-size: 12px;
    font-weight: 700;
    width: 0;
    height: 0;
    border-style: inset;
    border-width: 0 95px 135px 95px;
    border-color: transparent transparent #265d7b transparent;
    float: left;
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

.feature .geometry .g-wrap .tt p {
    text-align: center;
    top: 50px;
    left: -62px;
    position: relative;
    width: 127px;
    height: 93px;
    margin: 0;
    font-size: 13px;
    transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
}

.feature .geometry .g-wrap .tt img {
    margin-bottom: 10px;
}