时间戳

首页 > 解决方案 > CSS中元素一侧的左边框倾斜

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

问题描述

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

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

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

但我试图对左侧做同样的事情。

这是我想要达到的设计

表格设计

我已经尝试过了，但它扭曲了整个领域

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

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

}

标签： htmlcsscss-selectors

解决方案

使用你链接的 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>

推荐阅读