skewed div borders

by sundaramkumar

HTML

<div class="topNavMenu"><p>test 1</p></div>
<div class="topNavMenu"><p>test 2</p></div>
<div class="topNavMenu"><p>test 3</p></div>

CSS

body {
    margin:50px;
    min-width:400px;
    background:white;
}
.topNavMenu:nth-child(n) {
    background:rgb(122, 206, 122);
    height:40px;
    width:80px;
    transform: skew(-10deg) ;
    -webkit-transform: skew(-10deg);
    -moz-transform: skew(-10deg) ;
    
    text-align: center;
    vertical-align: middle;
     line-height: 10px;     
    display:inline-block; /* to show all divs in a single row */
}
div:nth-child(n) p {
    transform: skew(10deg) ;
    -webkit-transform: skew(10deg);
    -moz-transform: skew(10deg);
    padding:3% 2%;
    /* background:rgb(122, 206, 122); */
}
/* div:nth-child(2) {
    background:rgb(122, 206, 122);
    height:40px;
    width:40px;
    transform: skew(-10deg) ;
    -webkit-transform: skew(-10deg);
    -moz-transform: skew(-10deg) ;
    
    text-align: center;
    vertical-align: middle;
    line-height: 40px;      
}
div:nth-child(2) p {
    transform: skew(10deg) ;
    -webkit-transform: skew(10deg);
    -moz-transform: skew(10deg);
    padding:3% 2%;
} */