在CSS中倾斜元素一侧的左边框

Question

我试图将CSS元素(特别是表单和提交按钮(的右侧倾斜。

我发现这个Fiddle对右侧非常有效。

http://jsfiddle.net/5a7rhh0L/3/

但我正试着为左边做同样的事情。

这是我试图获得的设计

表单设计

我试过了，但它扭曲了整个领域的

.contactForm .elementor-field-textual {
transform: skewX(-22deg);
-ms-transform: skewX(-22deg);

-webkit变换：串X(-22deg(；左边距：70px；

}

Answer 1

使用您链接的jsfiddle，您只需更改transform-origin和:after的位置

#a {
position: relative;
width: 120px;
padding: 10px 20px;
font-size: 20px;
margin-left: 120px;
position: relative;

color: #2E8DEF;
background: white;
border: 1px solid grey;
border-left: none;
}
#a:before {
content: " ";
position: absolute;
display: block;
width: 100%;
height: 100%;
top: -1px;
right: 100%;
z-index: -1;

background: white;
border-bottom: 1px solid grey;
border-left: 1px solid grey;
border-top: 1px solid grey;

transform-origin: bottom right;
-ms-transform: skew(-30deg, 0deg);
-webkit-transform: skew(-30deg, 0deg);
transform: skew(-30deg, 0deg);
}

<div id="a">
Contact
<br>Hello
<br>Hi
</div>
<br>
<div id="a">
This
<br>div
<br>has
<br>a
<br>lot
<br>of
<br>rows
<br>.
<br>.
<br>.
</div>