阅读(61)

用css3写出气球样式的示例代码

最后一次修改 2017年09月14日

本文介绍了用css3写出气球样式的示例代码,分享给大家,具体如下:

气球效果图:

html:

1
<div class="ballon"></div>

css:

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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
.balloon{
 
         width: 160px;
 
         height: 160px;
 
         background: #faf9f9;
 
          /*css3 圆角属性*/
 
          border-radius: 50% 50% 25% 50%;
 
           /*顺时针旋转45度*/
 
           transform: rotate(45deg);
 
           /*盒子阴影 x位移 y位移 羽化 半径 颜色 */
 
           box-shadow: -8px -8px 80px -8px #873940 inset;
 
}
 
/*after  before 伪元素*/
 
.balloon::after{
 
           position: absolute;
 
            bottom: 5px;
 
            right: 5px;
 
            content:"";
 
             display: block;
 
             /*width: 18px;
 
             height: 18px;*/
 
             /*background: #873940;*/
 
            /*transform: rotate(45deg);*/
 
             border: 8px solid transparent;
 
             border-right-color: #873940;
 
             transform: rotate(45deg);
 
             border-radius: 50%;
 
}