Question

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

我在stackoverflow中看到了这个链接 Skew Input Border Without Skewing Text Inside 但它从双方都有偏见。我想要的是这个：使用rgba输入一侧倾斜和背景颜色。

Answer 1

对于一侧偏斜，您需要使用带原点的透视。然而，这种方法仅适用于宽度和高度的精确尺寸，例如300px和50px（不适用于百分比的百分比）。

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

＆＃13;

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%;

}

＆＃13;

<label><input></label>

＆＃13;

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

1 个答案: