Tranform Skew Not Working [CSS]


#1

I have an unusual problem with transform skew CSS Property. I have a div with some content and I am skewing the right border.

Everything is working when I test the app on the desktop. However, when I test the app on a device, the CSS is not working.

HTML

 <div class="aa">2</div>

CSS

.aa{
    float: left;
    position: relative;
    width: 20px;
    padding: 10px 20px;
    font-size: 20px;
    color: #f0f0f0;
    background: #f44336;

}

.aa:after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background: #f44336;
    transform-origin: bottom left;
    -webkit-transform: skew(-20deg, 0deg);

}

#2

Maybe it doesn’t work because the not webkit prefix is missing? So just transform: skew(-20deg, 0deg); . It’s possible the -webkit-transform isn’t available on your device anymore, since it became standard.