乍一看，很簡單，做小三角，首先想到的是利用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>