涂鸦风格的对话框

在线演示    源码下载

下面我们来分享一下实现的方法，主要由HTML代码和CSS代码组成。


HTML代码：

1. <div>
   

2.         <div>
   

3.                 <div>CSS3简单实现涂鸦风格边框 ** to</div>
   

4.         </div>
   

5. </div>

复制代码

1. .wrap {
   

2.         padding:35px 25px;
   

3.         width:450px;
   

4.         margin:40px auto;
   

5.         background:#58**6;
   

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. }

复制代码