DIV+CSS实现的小三角

最新推荐文章于 2023-04-11 10:00:22 发布

转载最新推荐文章于 2023-04-11 10:00:22 发布 · 1k 阅读

文章标签：

#css #div #小三角

前端专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用纯CSS来实现不同方向小三角的方法，通过巧妙地利用border属性达到目的，无需额外图片资源，方便调整方向。

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

两年前写的东西，前几天项目里又用到了，贴在这里，记录下。实现效果：

这里的小三角方向是可以改变的，包括向上、向下、向右、以及这里的向左。

HTML代码：

<!-- 外框 -->
<div
class="mod-container">
    <!-- 小三角部分 -->
    <div
class="mod-triangle">
        <div
class="t-border"></div>
        <div
class="t-inset"></div>
    </div>
</div>

CSS代码：

/*外框容器*/
.mod-container {
    width:100px;
    height:60px;
    border:1px
solid #000;
    margin:20px;
    background:#fff;
}
/*小三角部分*/
.mod-triangle {
    display:block;
    position:relative;
    left:-23px;
    top:18px;
    z-index:20;
}
.mod-triangle .t-border,
.mod-triangle .t-inset{
    left:0px;
    top:0px;
    width:0;
    height:0;
    font-size:0;
    overflow:hidden;
    position:absolute;
    border-width:12px;
    /*可在此处更改小三角方向：上-右-下-左（solid的位置）*/
    border-style:dashed
solid dashed 
dashed;
}
/*小三角的边框，如果不需要，可将颜色值改变*/
.mod-triangle .t-border{
    border-color:transparent
#000 transparent 
transparent;
    left:-1px;
}
.mod-triangle .t-inset{
    border-color:
transparent #fff
transparent transparent;
}