6. 平行四边形

skew

div {
  width: 200px;
  height: 100px;
  background: #fabc08;
  margin-left: 100px;
  transform: skew(-45deg);
}

只skew，里面的内容也会跟着变形

使用嵌套

 <a href="#" class="button">
    <div>我不要变形</div>
  </a>

对内容进行反向skew

.button {
  width:  100px;
  margin-left: 100px;
  background: #fabc08;
  display: block;
  transform: skew(-45deg);
}
.button > div {
  transform: skew(45deg);
}

使用伪元素

div {
  width:  100px;
  height: 50px;
  margin-left: 100px;
  position: relative;
  line-height: 50px;
  text-align: center;
}
div::before {
  content: '';
  position: absolute;
  left: 0;top: 0;bottom: 0;right: 0; /* 变成和div一样大小 */
  background: #fabc08;
  z-index: -1;  
  transform: skew(-45deg)
}

菱形

把正方形skew，再rotate就得到菱形了