jquery - 如何在一侧倾斜输入和背景颜色 rgba

Question

我想创建像这张图片这样的输入 enter image description here

我从 stackoverflow 看到了这个链接 Skew Input Border Without Skewing Text Inside但它从两边都有倾斜。我想要的是:输入一侧倾斜，背景颜色为 rgba。

Answer 1

对于一侧倾斜，您需要使用带原点的透视图。然而，这种方法只适用于宽度和高度的精确尺寸，例如300px 和 50px(不适用于百分比大小)。

我不得不说，我通过尝试和错误发现了 +26 度的输入偏斜，以实现标签 -30 度偏斜的良好外观。您可能需要根据所需的宽度修改这些数字。

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>