DIV+CSS实现的小三角

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

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

HTML代码：

<
div
class
=
"mod-container"
>

<
div
class
=
"mod-triangle"
>

<
div
class
=
"t-border"
></
div
>

<
div
class
=
"t-inset"
></
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
;

}

相关文章：

你感兴趣的文章：

标签云：