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