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

【问题标题】：Skew left border of one side of an element in CSSCSS中元素一侧的左边框倾斜
【发布时间】：2021-09-22 10:32:07
【问题描述】：

我正在尝试仅倾斜 CSS 元素的右侧（特别是表单和提交按钮）。

我发现这个 Fiddle 非常适合右侧使用。

但我正在尝试对左侧做同样的事情。

这是我想要达到的设计

我试过这个，但它歪曲了整个领域

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

-webkit-transform: skewX(-22deg); 左边距：70px;

}

【问题讨论】：

它还会使您的输入字段和文本倾斜，并且还会使文本模糊.. 而是删除倾斜并使用 ::before 伪选择器并稍微旋转并使用绝对位置放置它。
寻求代码帮助的问题必须包含重现它所需的最短代码在问题本身中最好在Stack Snippet 中。见How to create a Minimal, Reproducible Example
谢谢大家，我想我走错了路。根据我的阅读，我无法将伪元素应用于表单字段。

标签： html css css-selectors

【解决方案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>

【讨论】：

谢谢查尔斯，但我不认为这适用于我的表单；我认为伪元素不会适用于表单/输入字段
您可以将表单嵌入到 div 标签中