这些例子大都通过对元素设置position:relative，其before, afterposition:absolute来布局。
仅贴出部分css代码，具体代码可访问文末的codepen地址
不规则背景图/图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| // html部分-pug
.card-wrapper
.bg
.content
// css部分-stylus
.card-wrapper
width 300px
height 500px
overflow hidden
border-radius 10px
box-shadow 0px 0px 15px ＃fff
.bg
width 100%
height 250px
background-image url('http://img1.3lian.com/2015/a1/20/d/136.jpg')
background-position 80% 42%
.content
background #fff
height 250px
padding 10px
position relative
&::before
content ''
border-color transparent #fff #fff transparent
border-width 30px 150px 30px 150px
border-style solid
position absolute
top -60px
left 0px
|
和图层设计类似，content的before是一块三角区域，遮挡了图片的一部分，形成不规则图片的效果
不完整边框
就是指卡片上方的文字左上角和右下角的边框，也可以用这样的方式给文字始末加上特殊样式的引号，书名号等符号。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| // html部分-pug
span.corner-border-btn
// css部分-stylus
$borderSize = 12px
$borderPadding = 10px
.corner-border-btn
color #000
position relative
cursor pointer
top 30%
padding 0px 10px
transition all .5s
&:hover
padding 0px 30px
font-size 1.2rem
&:before, &:after
content ''
position absolute
width $borderSize
height $borderSize
&:before
border-left 1px solid #000
border-top 1px solid #000
left -($borderPadding)
top -($borderPadding)
&:after
border-right 1px solid #000
border-bottom 1px solid #000
bottom -($borderPadding)
right -($borderPadding)
|
表格hover行列高亮
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| // html部分-pug
table.hover-link-table
... // 内容部分 tr td
// css部分-stylus
.hover-link-table
border 1px solid #ccc
table-layout fixed
border-collapse collapse
overflow hidden // 必须
tr:not(:last-child)
border-bottom 1px solid #ccc
tr td:not(:last-child)
border-right 1px solid #ccc
td
height 30px
position relative
cursor pointer
z-index 1
&:hover
z-index 0
&:after, &:before
z-index -1
position absolute
content ''
background rgba(255, 248,220, .5)
&:after
top 0px
left -1000px
height 100%
width 2000px
&:before
left 0px
top -1000px
width 100%
height 2000px
|
其实这样的方式不太好，因为table或容器元素的overflow要设为hidden, 如果还需要在table上做其他特殊样式的话，也许会有冲突，比如添加tooltip(有些库默认添加在当前元素后，可通过属性配置，设置container为body元素即可解决冲突)
气泡对话框
关于气泡框，看完以下两篇文章，基本就不成问题了。
css制作各式各样的三角形
css实现气泡对话框Demo
这里也写了个简单的例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| // html部分-pug
.bubble.yellow 你喜欢我吗
// css部分-stylus
.bubble
height 20px
border-radius 5px
padding 10px
position relative
&.yellow
background #FFF68F
&:after
border-color #FFF68F transparent
right 10%
border-width 20px 20px 0px 0px
&:after
position absolute
content ''
bottom -20px
border-style solid
|
时间轴效果
其实做时间轴不一定要用到before和after, 如果标记时间轴点的元素比较复杂的话，因为content不原生支持html的格式，所以还是不太够的，根本上还是归功于absolute布局
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| // html部分-pug
.timeline-item
.content-box
// css部分-stylus
$themeColor = #FFDAB9
.timeline-item
position relative
padding 0px 20px 0px
border-left 2px solid $themeColor
&::before
position absolute
content ''
border-radius 50%
background $themeColor
width 10px
height 10px
left -6px
|
总而言之
before, after是神器，有待好好发掘！
附上CodePen地址，例子都整合在一起了。
