聊天框添加小三角

重点是.chat-box样式的position属性设置为relative,再利用::after伪元素设置小三角相对位置。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
.chat-box {
    width:500px;
    height:300px;
    margin:100px auto;
    border:2px solid #acacac;
    border-radius:10px;
    position:relative;
}

.chat-box::after {
    background: #fff none repeat scroll 0 0;
    border-bottom: 2px solid #acacac;
    border-right: 2px solid #acacac;
    bottom: -22px;
    content: " ";
    display: block;
    height: 40px;
    left: 45px;
    position: absolute;
    transform: rotate(45deg);
    width: 40px;
}

css loading 加载

A collection of loading indicators animated with CSS SpinKit