CSS3绘制梯形按钮

实现它们主要使用 transform 即可,但是要注意一点,使用了 transform 之后,标签内的文字也会同样的变形,所以,我们通常使用元素的伪元素去实现造型,这样可以做到不影响按钮内的文字。
 CSS3绘制按钮
梯形借助了 perspective,其实是利用了一定的 3D 变换。原理就是一个矩形,绕着 X 轴旋转,像是这样:
 
使用 perspective 和 transform: rotateX() 即可,当然,它们可以合在一起写:
 
<div class='btn trapezoid'>Trapezoid</div>
.parallelogram {
    position: relative;
    width: 160px;
    height: 64px;
 
    &::after {
          content:"";
          position: absolute;
          top: 0; right: 0; bottom: 0; left: 0;
          transform: perspective(40px) rotateX(10deg);
          transform-origin: bottom;
          background: #ff9800;
    }
}

【本文关键词】:CSS3绘制按钮