[分享]css3四边形对角一半

CSS3四边形对角一半是一种可以帮助我们创建比较有趣的效果的特性。通过这个特性，我们可以让元素成为对角的四边形，同时对角线的一半会呈现出不同的颜色或者是背景图形。. quadrilateral { w...

CSS3四边形对角一半是一种可以帮助我们创建比较有趣的效果的特性。通过这个特性，我们可以让元素成为对角的四边形，同时对角线的一半会呈现出不同的颜色或者是背景图形。

. quadrilateral {
  width: 200 px;
  height: 200 px;
  background-color: #F00;
  transform: skew(-20 deg, 0);
  margin: 0 auto;
  position: relative;
}

/*背景对角线*/
. quadrilateral: before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(45 deg, #1a2980 50%, #26d0ce 50%);
  z-index: -1;
  transform: skew(20 deg, 0);
  transform-origin: 0;
} 

在代码中，我们首先定义了一个类名为“quadrilateral”的元素，它的宽高都是200像素，并且背景颜色为红色。transform: skew(-20deg, 0) 这一行代码则是用来指定元素将要呈现的对角线形状。我们需要使用这个属性来定义两个角度，一个是负数表示左侧的对角线倾斜程度，另一个是0表示右侧对角线不作倾斜。这样我们就可以将元素转变为对角四边形。 下一步中，我们通过 :before 伪元素来创建出对角线，利用background: linear-gradient(45deg, #1a2980 50%, #26d0ce 50%) 渐变来让对角线呈现出不同的颜色。z-index 为 -1 表示它要位于元素的下方，不会挡住我们的四边形。 最后，我们通过 transform: skew(20deg, 0) 将伪元素也进行了翻斜，并且 transform-origin: 0，将变换的一点移动到了元素的左上角，保证伪元素的角度和元素本身的相同。