我想创建像这张图片这样的输入 enter image description here
我从 stackoverflow 看到了这个链接 Skew Input Border Without Skewing Text Inside 但它从两边都有倾斜。 我想要的是: 输入一侧倾斜,背景颜色为 rgba。
最佳答案
对于一侧倾斜,您需要使用带原点的透视图。然而,这种方法只适用于宽度和高度的精确尺寸,例如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>
关于jquery - 如何在一侧倾斜输入和背景颜色 rgba,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47058581/