不自重者,取辱。不自长者,取祸。不自满者,受益。不自足者,博闻。
DIV+CSS实现的小三角 进入全屏
line

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

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

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;
}
趣店(原趣分期)技术学院
重点关注技术架构、服务化、优秀工具、自动化平台、开发全流程一体化解决方案、新人培养、工程师进阶之道等方面
这里环境优雅、氛围年轻、主要是福利还多,还等什么?我们敞开技术的大门,欢迎各种工程师加入!

评论区域

line
  • x 2012-11-11 16:39:11 回复
    ie6不支持transparent 需要通过滤镜实现。