<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Trapezoid</title> </head> <style> * { margin: 0; padding: 0; } .trapezoid-space {
display: flex; } .trapezoid-left {
margin-top: 10px; position: relative; height: 60px; width: 150px; overflow: hidden; } .trapezoid-right { margin-top: 10px; position: relative; height: 60px; width: 150px; overflow: hidden; } .trapezoid-left::before{ content: ''; display: block; position: absolute; top: 0; bottom: 0; left: 50px; width: 175px; border: 5px solid blue; /* transform-origin: 50 50; */ -webkit-transform:skewX(45deg); /*为Chrome/Safari*/ -moz-transform:skewX(45deg); /*为Firefox*/ -ms-transform:skewX(45deg); /*为IE*/ -o-transform:skewX(45deg); /*为Opera*/ transform:skewX(45deg); } .trapezoid-right::after { content: ''; display: block; position: absolute; top: 0; bottom: 0; right: 50px; width: 175px; border: 5px solid red; /* transform-origin: 50 50; */ -webkit-transform:skewX(-45deg); /*为Chrome/Safari*/ -moz-transform:skewX(-45deg); /*为Firefox*/ -ms-transform:skewX(-45deg); /*为IE*/ -o-transform:skewX(-45deg); /*为Opera*/ transform:skewX(-45deg); } </style> <body> </div> <div class="trapezoid-space"> <div class="trapezoid-left"></div> <div class="trapezoid-right"></div> </div> </body> </html>
