css3倾斜样式

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>

效果图：

 

 

知识点：

https://www.w3school.com.cn/cssref/pr_transform.asp

posted @ 2020-07-14 09:13  前端HL  阅读(1246)  评论(0)  编辑  收藏  举报