纯CSS3实现自定义Tooltip边框 涂鸦风格

      这是一款用纯CSS3打造的自定义Tooltip边框的应用，之前我们讨论过如何用CSS3来实现不同样式的Tooltip，今天的这款Tooltip却可以用CSS3来自定义边框，边框呈涂鸦风格。用CSS3实现自定义边框的好处是可以自适应边框内部的文字数量大小。

HTML代码：

1 <div>
2     <div>
3         <div>CSS3简单实现涂鸦风格边框 Welcome to</div>
4     </div>
5 </div>

CSS代码：

1 .wrap {
2     padding:35px 25px;
3     width:450px;
4     margin:40px auto;
5     background:#586786;
6     border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;  
7     color:#eee;
8     box-shadow:1px 1px 0px rgba(0, 0, 0, .75)
9 }

 

 1 .box {
 2     position:relative;
 3     background:#fff;
 4     border:solid 5px #fff;
 5     width:200px;
 6     height:100px;
 7     margin:0 auto;
 8     border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
 9     padding:10px;
10     color:#666;
11     box-shadow:2px 3px 1px rgba(0, 0, 0, .75)
12 }
13 .box:before {
14     content: "";
15     position: absolute;
16     bottom: -20px;
17     left: 60px;
18     border: 0;
19     border-right-width: 30px;
20     border-bottom-width: 20px;
21     border-style: solid;
22     border-color: transparent #fff;
23     display: block;
24     width: 0;
25 }

 1 .box .box {
 2     position:absolute;
 3     top:5px;
 4     left:5px;
 5     width:180px;
 6     height:80px;
 7     border-color:#593207;
 8     box-shadow:none;
 9 }
10 .box .box:before {
11     left: 45px;
12     border-color: transparent #593207;
13 }

 

小知识点：纯css3打造三角形

 

                /*箭头向上*/
                .arrow-up {
                        width:0; 
                        height:0; 
                        border-left:30px solid transparent;
                        border-right:30px solid transparent;
                        border-bottom:30px solid #000;
                }
                        
                 /*箭头向下*/
                .arrow-down {
                        width:0; 
                        height:0; 
                        border-left:30px solid transparent;
                        border-right:30px solid transparent;
                        border-top:30px solid #000;
                }
                        
                 /*箭头向左*/
                .arrow-left {
                        width:0; 
                        height:0; 
                        border-top:30px solid transparent;
                        border-bottom:30px solid transparent; 
                        border-right:30px solid #000; 
                }
                   
                /*箭头向右*/
                .arrow-right {
                        width:0; 
                        height:0; 
                        border-top:30px solid transparent;
                        border-bottom: 30px solid transparent;
                        border-left: 30px solid #000;
                }
                
                /*:after 伪元素在元素之后添加内容实现小三角*/
                .box{ width:300px; height:300px; background:#838383; position:relative;}
                .box:after{
                    position:absolute;
                        right:-20px;
                        top:10px;
                    display:block;
                        content:"";
                    width:0; 
                        height:0; 
                        border-top:20px solid transparent;
                        border-bottom: 20px solid transparent;
                        border-left: 20px solid #838383;
                }