两年前写的东西,前几天项目里又用到了,贴在这里,记录下。实现效果:
这里的小三角方向是可以改变的,包括向上、向下、向右、以及这里的向左。
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
;
}
|