css3倾斜样式：transform:skewX(22deg)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin: 0; padding: 0;} body{ background-color: #333; color: #fff;} a{ text-decoration: none;color: #fff;} .transition-skewX{ width: 200px; margin: 30px auto;} .transition-skewX a{ float: left; margin-right: 7px;width: 22px;height: 22px; line-height: 22px; font-size: 12px; text-align: center;transform: skewX(-22deg);} .transition-skewX .current, .transition-skewX a:hover{ background-color: #fff; color: #333; transition: all 0.3s;} .transition-skewX span{ display: block; transform:skewX(22deg)} </style> </head> <body> <div class="transition-skewX"> <a href="" class="current"><span>中</span></a> <a href=""><span>英</span></a> </div> </body> </html>
效果图：
知识点：