css3 实现选项卡小三角形状

最新推荐文章于 2025-06-21 09:15:59 发布

con_knife

最新推荐文章于 2025-06-21 09:15:59 发布

阅读量2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：理论前端框架文章标签： css3 html

本文链接：https://blog.youkuaiyun.com/con_knife/article/details/73924498

前端框架同时被 2 个专栏收录

17 篇文章

订阅专栏

理论

11 篇文章

订阅专栏

这篇博客介绍了如何使用CSS3实现选项卡样式，并重点讲解了生成小三角形的技巧。内容包括HTML结构和关键的CSS样式代码，帮助读者掌握这一视觉效果的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果如下图查看链接

这里写图片描述

html

<div class="fitting-tab">
    <div class="fitting-text  fit-active" id="btn1">
        <div class="trangle "></div>
            推荐              
    </div>
    <div class="fitting-text " id="btn2">
        <div class="trangle "></div>
            男装              
    </div>
    <div class="fitting-text " id="btn3">
        <div class="trangle "></div>
            女装              
    </div>
    <div class="fitting-text " id="btn4">
        <div class="trangle "></div>
            套装              
    </div>
</div>

css 样式（核心部分）

.fitting-tab .fitting-text{
    width:80px;
    height:30px;
    background:red;
    position: relative;
    text-align:center;
    line-height:30px;
    background-color:#AF8172;
    color:#fcfcfc;
    font-size:16px;
    border-radius:6px;


}

.fitting-tab .trangle{
    position: absolute;
    width: 0;
    height: 0;
    border-right: 5px solid transparent;
    border-left: 5px solid transparent;
    border-top: 5px solid #AF8172;
    z-index: 99;
    bottom: -5px;
    left: 50%;
    margin-left: -5px;
    }