乍一看，很简单，做小三角，首先想到的是利用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>CSS——小三角带边框带阴影
原文地址：https://www.cnblogs.com/jialinG/p/9389970.html