学习笔记-简易导航栏样式 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;overflow: hidden;background:blue;}
        ul{width: 550px;margin: 30px auto;}
        ul li{float: left;width: 100px;height: 30px;background: red;color: aqua;line-height: 30px;text-align: center;margin: 0 5px;transform: skew(-30deg);}
        ul li span{display: block;transform: skew(30deg);}
    </style>
</head>
<body>
    <ul>
        <li><span>菜单</span> </li>
        <li><span>首页</span> </li>
        <li><span>动漫</span> </li>
        <li><span>电影</span> </li>
        <li><span>电视剧</span></li>
    </ul>
</body>

　　简易导航栏效果如图：其中样式部分用到了斜切

transform: skew(-30deg)
之后又斜切回去了

 

posted @ 2021-05-26 17:37  心懒了♀麻木来了  阅读(75)  评论(0)  编辑  收藏  举报