Rework of Chevron

Rework of Chevron using CSS skew

by Ben Clayton

HTML

<div class="chevron-tail">
    <div class="chevron">
        <div class="v1 sl"><p>ONE</div>
        <div class="v2 sl"><p>TWO</div>
        <div class="v3 sr"><p>THREE</div>
        <div class="v4 sr"><p>FOUR</div>
    </div>
</div>
            
<div class="bottomwedge">
</div>

CSS

body {    font-family: Arial; margin:0px;}

.chevron-tail {
    position:absolute;
    left:-200px;
    width:300px;
    height:168px;
	background-color:#FFD0D0;
}
.chevron {
        position:absolute;
        left:250px;
}


.chevron div {
    width: 80px;
	height: 30px;
    margin:0px 0px;
    padding:10px 5px 0px 5px;
    text-align:center;
	background-color:#FFD0D0;
    border:1px solid #EFC0C0 
}

.chevron div.sl {
    -webkit-transform: skew(30deg);
	   -moz-transform: skew(30deg);
	     -o-transform: skew(30deg);
}
.chevron div.sr {
    -webkit-transform: skew(-30deg);
	   -moz-transform: skew(-30deg);
	     -o-transform: skew(-30deg);
}

.chevron div.sl p {
    margin:0px;
    -webkit-transform: skew(-30deg);
	   -moz-transform: skew(-30deg);
	     -o-transform: skew(-30deg);
}

.chevron div.sr p,.chevron div.v4 p {
    margin:0px;
    -webkit-transform: skew(30deg);
	   -moz-transform: skew(30deg);
	     -o-transform: skew(30deg);
}


.chevron div.v2,.chevron div.v3 {
    margin-left:24px;    
}

.chevron div:hover {
	background-color:#FF8080;
}
.chevron div.selected {
	background-color:#FF4040;
}

.bottomwedge {
    position:fixed;
	width: 100%;
	height: 500px;
    top:160px;
    -webkit-transform: skewY(-3deg);
	   -moz-transform: skewY(-3deg);
	     -o-transform: skewY(-3deg);
    background: url("http://lucozadesport.com/images/background-image.jpg") no-repeat scroll center 0px rgba(0, 0, 0, 0) !important;
}

JavaScript

$('.navbar div').click(function(){
   $('.navbar div').removeClass('selected');
   $(this).addClass('selected');
});
$(".chevron-tail").animate({"left": '+=200'},3000);



//http://css-tricks.com/video-screencasts/23-conditional-stylesheets/?play=true