利用伪元素进行3d变形为梯形

  1. .box{
  2.     width: 100px;
  3.     height: 100px;
  4.     margin: 100px auto;
  5.     position: relative;
  6.     color: wheat;
  7. }
  8. .box::before{
  9.     content: '';
  10.     position: absolute;
  11.  top: 0; right: 0; bottom: 0; left: 0;
  12.  z-index: -1;
  13.  background: #58a;
  14.  transform: perspective(.5em) rotateX(5deg);
  15. }
  16.     </style>
  17. </head>
  18. <body>
  20.     <div class="box">  </div>

image.png

如你所见，我们给它添加了背景、边框、圆角、投影等一系列样式。 它们都可以完美生效！不仅如此，我们只需要把 transform-origin 改成 bottom left 或 bottom right，就可以立即得到左侧倾斜或右侧倾斜的标 签页

只要改变 transform-origin 就 可以得到单侧倾斜的标签页 

  1. .nav > a {
  2.  position: relative;
  3.  display: inline-block;
  4.  padding: .3em 1em 0;
  5. }
  6. .nav > a::before {
  7.  content: '';
  8.  position: absolute;
  9.  top: 0; right: 0; bottom: 0; left: 0;
  10.  z-index: -1;
  11.  background: #ccc;
  12.  background-image: linear-gradient(
  13.  hsla(0,0%,100%,.6),
  14.  hsla(0,0%,100%,0));
  15.  border: 1px solid rgba(0,0,0,.4);
  16.  border-bottom: none;
  17.  border-radius: .5em .5em 0 0;
  18.  box-shadow: 0 .15em white inset;
  19.  transform: perspective(.5em) rotateX(5deg);
  20.  transform-origin: bottom;
  21. }
  22.     </style>
  23. </head>
  24. <body>
  26.     <div class="nav"> <a href="">content</a></div>

image.png