使用css实现旗型页签

最新推荐文章于 2024-04-19 20:39:07 发布

Miss_Mr_Rui

最新推荐文章于 2024-04-19 20:39:07 发布

阅读量440

点赞数 1

文章标签： css html

本文链接：https://blog.csdn.net/a791226606/article/details/126598753

版权

 <div class="mybbb">
    <div>11111111</div>
 </div>
 <div class="myaaa">
     <div>22222222</div>
 </div>

.myaaa{
    float: left;
    width: 16.66667%;
    max-width: 180px;
    text-align: center;
    margin-bottom: 9px;
    padding-right: 15px;
 }
 .myaaa > div{
    position: relative;
    padding: 5px 0 5px 8px;
    line-height: 20px;
    white-space: nowrap;
    overflow: visible;
    color: #3c4353;
    background: #E3F2FD;
 }
 .myaaa > div:hover{
    background: red;
    color: #fff;
 }
 .myaaa > div:before{
    content: ' ';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 10px;
    border-color: transparent transparent transparent #fff;
    position: absolute;
    left: 0;
    top: 0;
}

.myaaa > div:after,.myaaa > div:hover:after {
    content: ' ';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 10px;
    border-color: transparent transparent transparent #E3F2FD;
    position: absolute;
    left: 0;
    top: 0;
}
.myaaa > div:hover:after {
    border-color: transparent transparent transparent red;
}

.mybbb{
    float: left;
    width: 16.66667%;
    max-width: 180px;
    text-align: center;
    margin-bottom: 9px;
    padding-right: 15px;
 }
 .mybbb > div{
    position: relative;
    padding: 5px 0 5px 8px;
    line-height: 20px;
    white-space: nowrap;
    overflow: visible;
    color: #3c4353;
    background: #ccc;
 }
 .mybbb > div:hover{
    background: yellow;
    color: #666;
 }

.mybbb > div:after,.mybbb > div:hover:after {
    content: ' ';
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 10px;
    border-color: transparent transparent transparent #ccc;
    position: absolute;
    left: 0;
    top: 0;
}
.mybbb > div:hover:after {
    border-color: transparent transparent transparent yellow;
}

.mybbb > div:after, .mybbb > div:hover:after,.myaaa > div:after, .myaaa > div:hover:after{
    left: auto;
    right: -10px;
    z-index: 2;
}

效果：（鼠标移入可以改变颜色）
在这里插入图片描述