CSS——小三角带边框带阴影
乍一看，很简单，做小三角，首先想到的是利用border的transparent特性，可以制作出小三角的效果。但是注意，这个小三角本身就是边框制作出来的。怎么能在小三角的外边再加一层小边框呢。那就必须再叠加一层一样的东西，让两者有1px的错位。问题就解决了。不想在页面添加多余的无意义的标签，还想实现这个效果。首先想到的就是用元素的伪类来实现。
首先想到的是给小三角加一个box-shadow属性，问题就可能很轻松的解决了，可是问题往往没有那么简单。
box-shadow只加在border外边缘，跟我们想要的真的是差太多。仲么办呢？跟上面的原理差不太多，只是要用到css3中transform,把元素rotate(45deg),变成两个菱形，然后对底下的元素加box-shadow，然后用后面的元素覆盖底下的元素。代码如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>小三角带边框带阴影的div——css实现效果</title> 9 <style> 10 .box2 { 11 float: left; 12 position: relative; 13 width: 100px; 14 height: 100px; 15 border: 1px solid red; 16 margin-left: 50px; 17 margin-right: 50px; 18 margin-top: 20px; 19 margin-bottom: 20px; 20 box-sizing: border-box; 21 font-size: 14px; 22 padding: 10px; 23 box-shadow: 0 0 2px rgba(0, 0, 0, .5) 24 } 25 26 .box2:before, 27 .box2:after { 28 position: absolute; 29 content: ''; 30 width: 14px; 31 height: 14px; 32 bottom: -8px; 33 left: 50%; 34 margin-left: -7px; 35 overflow: hidden; 36 pointer-events: none; 37 -webkit-transform: rotate(45deg); 38 -mz-transform: rotate(45deg); 39 transform: rotate(45deg); 40 } 41 42 .box2:before { 43 background: red; 44 box-shadow: 1px 1px 2px rgba(0, 0, 0, .5) 45 } 46 47 .box2:after { 48 bottom: -7px; 49 background: #fff; 50 } 51 </style> 52 </head> 53 54 <body> 55 <div class="box2"></div> 56 </body> 57 58 </html>
