how to skew input in one side and backgroun-color rgba

Question

i wanna create inputs like this picture enter image description here

i saw this link from stackoverflow Skew Input Border Without Skewing Text Inside but it has skew from both side. what i want is this: input with skew in one side and background color with rgba.

https://stackoverflow.com/questions/19761202/css3-transform-skew-one-side — Jared Bledsoe, Nov 01 '17 at 15:44

score 0 · Accepted Answer · answered Nov 01 '17 at 16:03

For one side skew you need to use perspective with origin. How ever this method is only usable for an exact size of width and height e.g. 300px and 50px (not usable for sizes by percent).

I have to say that I found +26 degree skew for input by try and error to achieve a good appearance against -30 degree skew of label. You may need to modify these numbers according to the desired width.

label {    
    width: 300px;
    height:50px;
    -webkit-transform: perspective(300px) rotateX(30deg);
    -o-transform: perspective(300px) rotateX(30deg);
    -moz-transform: perspective(300px) rotateX(30deg);
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    -o-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
    display:inline-block;
    border:2px solid #323232;
    background:rgba(255, 0, 0, 0.3)
}

input {
    width:280px;
    height:48px;
    border:1px solid #ff0000;
    outline:0;
    -webkit-transform: perspective(280px) rotateX(-26deg);
    -o-transform: perspective(280px) rotateX(-26deg);
    -moz-transform: perspective(280px) rotateX(-26deg);
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    -o-transform-origin: 0% 50%;
    transform-origin: 0% 50%;

}

<label><input></label>

can you please see this question?https://stackoverflow.com/questions/47028836/how-to-create-curve-responsive-menu-in-css — zahra, Nov 02 '17 at 10:48

how to skew input in one side and backgroun-color rgba

1 Answers1