Cacher is the code snippet organizer for pro developers

https://css-tricks.com/examples/ShapesOfCSS/


example parallelogram background with text


<div class="parallelogram">
   <p>Allocation by Products</p>
</div>



CSS:
.parallelogram {
    width: 240px;
    height: 28px;
    -webkit-transform: skew(-18deg);
    -moz-transform: skew(18deg);
    -o-transform: skew(18deg);
    background: #F5B70F;
    display: block;
    margin: 0 auto;
}

.parallelogram p {
    font-style: normal;
    font-weight: bold;
    padding-top: 2px;
    padding-left: 20px;
    -webkit-transform: skew(18deg); /* revert text to vertical  */
    -moz-transform: skew(18deg);
    -o-transform: skew(18deg);
}