边框画的三角形给shadow

本文地址：http://www.cnblogs.com/veinyin/p/8690882.html 

 

要写一个对话气泡样式，我们首先想到的当然给是一个盒子，然后用边框画一个三角形定位过去。

如果不需要给阴影，这样是肯定没问题的。

但是！当 UI 把三角形放在顶部，并要求给加一个阴影的时候，内心就是极度崩溃的了。

基本上三角形都是一个边框，而这样画出来的三角形是给不了阴影的，所以要曲线救国。

首先我想到的就是画三个三角形，分别给白色、浅灰、深灰，定位过去给假阴影，这样效果看上去很生硬，如下：

 

这时就需要想点别的方法了。

第二种方式就是用两条边画三角形，两条相邻的给颜色，另两条相邻的给 transparent，这样就可以给 box-shadow 了。

但是！当然有但是。三角形有投影了，定位过去三角形跟下面盒子一定会有一个分割线。

要解决这个问题，只需要给一个遮罩盖一下。

这时，我们会开心的发现分割线没了。

但是！另一个问题出现了。是的，太多问题要解决。

我们在盒子里给内容时，发现上面遮罩挡住了内容，因为要挡住必须把 z-index 给的比盒子大。

知道问题之后就很好解决了。再给一个放内容的盒子，z-index 给一个比遮罩更大的值就可以了。

效果如下图，可以说是很完美的达到 UI 效果了。

 

至此结束，HTML 与 CSS 如下：

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8" />
 6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7     <title>demo</title>
 8     <meta name="viewport" content="width=device-width, initial-scale=1">
 9     <style>
10         *{
11             padding: 0;
12             margin: 0;
13             background-color: #ccc;
14         }
15         .box {
16             width: 500px;
17             /* height: 300px; */
18             background-color:#ffffff;
19             margin: 100px auto;
20             position: relative;
21             border-radius: 8px;
22             box-shadow: 4px 4px 8px #333
23         }
24        
25         .triangle{
26             z-index: -9;
27             position: absolute;
28             top: -10px;
29             left: 280px;
30             width: 0;
31             height: 0;
32             border-style: solid;
33             border-width: 20px;
34             border-color: #fff #fff transparent transparent;
35             transform: rotate(-45deg);
36             box-shadow: 4px 4px 8px #333;
37         }
38         .triangle-mask{
39             z-index: 2;
40             width: 30px;
41             height: 30px;
42             background-color: #ffffff;
43             transform: rotate(-45deg);
44             position: absolute;
45             top: -12px;
46             left: 285px;
47         }
48         .container{
49             position: relative;
50             top: 0;
51             left: 0;
52             z-index: 3;
53             background-color:#ffffff;
54             border-radius: 8px;
55             padding: 10px;
56         }
57     </style>
58 </head>
59 
60 <body>
61     <div class="box">
62         <div class="container">
63             我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
64         </div>
65         <div class="triangle"></div>
66         <div class="triangle-mask"></div>
67     </div>
68 </body>
69 
70 </html>
View Code

 

 

END~~~≥ω≤

 

posted @ 2018-04-02 10:36  yuhui_yin  阅读(474)  评论(0)  编辑  收藏  举报