Copy to clipboard CSS LESS SCSS .parallelogram { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; width: 150px; height: 100px; border: none; font: normal 100em/normal Arial, Helvetica, sans-serif; color: rgba(0,0,0,1); -o-text-overflow: clip; text-overflow: clip; background: -webkit-linear-gradient(-90deg, rgba(252,236,252,1) 0, rgba(251,166,225,1) 50%, rgba(253,137,215,1) 51%, rgba(255,124,216,1) 100%), url("http://enjoycss.com/bg-img/default/11_5.png"), #2ecc71; background: -moz-linear-gradient(180deg, rgba(252,236,252,1) 0, rgba(251,166,225,1) 50%, rgba(253,137,215,1) 51%, rgba(255,124,216,1) 100%), url("http://enjoycss.com/bg-img/default/11_5.png"), #2ecc71; background: linear-gradient(180deg, rgba(252,236,252,1) 0, rgba(251,166,225,1) 50%, rgba(253,137,215,1) 51%, rgba(255,124,216,1) 100%), url("http://enjoycss.com/bg-img/default/11_5.png"), #2ecc71; background-position: 50% 50%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: auto auto; background-size: auto auto; -webkit-transform: rotateX(-3.437746770784939deg) rotateY(-55.57690612768985deg) skewX(-20deg); transform: rotateX(-3.437746770784939deg) rotateY(-55.57690612768985deg) skewX(-20deg); } .parallelogram:hover { background-position: 50% 50%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: auto auto; background-size: auto auto; }

Copy to clipboard CSS LESS SCSS .parallelogram { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; width: 150px; height: 100px; border: none; font: normal 100em/normal Arial, Helvetica, sans-serif; color: rgba(0,0,0,1); -o-text-overflow: clip; text-overflow: clip; background: -webkit-linear-gradient(-90deg, rgba(252,236,252,1) 0, rgba(251,166,225,1) 50%, rgba(253,137,215,1) 51%, rgba(255,124,216,1) 100%), url("http://enjoycss.com/bg-img/default/11_5.png"), #2ecc71; background: -moz-linear-gradient(180deg, rgba(252,236,252,1) 0, rgba(251,166,225,1) 50%, rgba(253,137,215,1) 51%, rgba(255,124,216,1) 100%), url("http://enjoycss.com/bg-img/default/11_5.png"), #2ecc71; background: linear-gradient(180deg, rgba(252,236,252,1) 0, rgba(251,166,225,1) 50%, rgba(253,137,215,1) 51%, rgba(255,124,216,1) 100%), url("http://enjoycss.com/bg-img/default/11_5.png"), #2ecc71; background-position: 50% 50%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: auto auto; background-size: auto auto; -webkit-transform: rotateX(-3.437746770784939deg) rotateY(-55.57690612768985deg) skewX(-20deg); transform: rotateX(-3.437746770784939deg) rotateY(-55.57690612768985deg) skewX(-20deg); } .parallelogram:hover { background-position: 50% 50%; -webkit-background-origin: padding-box; background-origin: padding-box; -webkit-background-clip: border-box; background-clip: border-box; -webkit-background-size: auto auto; background-size: auto auto; }