如何将skewY（）变换仅应用于<div>元素的一侧？

Question

我正在尝试将div元素看起来像这样：

那么如何应用skew transform属性以便只有一侧（这里的底部）倾斜？

Answer 1

试试此代码

＆＃13;

＆＃13;

a {
  color: white;
}
.title {
    position: relative;
    width: 120px;
    padding: 45px 20px 10px 10px;
    font-size: 20px;
    position: relative;
    color: #FFF;
    background: Grey;
}
.title:after {
    content: " ";
    position: absolute;
    display: block;
    width: 100%;
    height: 230%;
    top: 0;
    left: 0;
    z-index: -1;
    background: Grey;
    transform-origin: bottom right;
    transform: skew(0deg,-20deg);
}

＆＃13;

<div class="title">
  
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用::before伪元素上的边框技巧创建三角形。

div {
  position: relative;
  padding: 30px;
  background-color: gray;
  width: 30px;
}

div::before {
  position: absolute;
  content: '';
  bottom: -120px;
  right: 0;
  width: 0; 
  height: 0; 
  border-top: 60px solid gray;
  border-bottom: 60px solid transparent;
  border-right: 90px solid transparent;
}

<div>Hello world</div>