小三角带边框带阴影的div——css实现效果

第一种情况：带边框的小三角

乍一看，很简单，做小三角，首先想到的是利用border的transparent特性，可以制作出小三角的效果。但是注意，这个小三角本身就是边框制作出来的。怎么能在小三角的外边再加一层小边框呢。那就必须再叠加一层一样的东西，让两者有1px的错位。问题就解决了。不想在页面添加多余的无意义的标签，还想实现这个效果。首先想到的就是用元素的伪类来实现。原理就是这样，废话不多说，上代码：

.box{
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:before,
.box:after{
position:absolute;
content:" ";
width:0;
height:0;
top:100%;
border:10px solid transparent;
left:50%;
margin-left:-5px;
pointer-events:none;
}
.box:before{
border-top-width:11px;
border-top-color:red;
margin-left:-11px;

}
.box:after{
border-width:9px;
border-top-width:10px;
border-top-color:#fff;
margin-left:-10px;}

第二种情况，有时设计师给出的设计图，小三角带边框，还带阴影，苦逼了吧。首先想到的是给小三角加一个box-shadow属性，问题就可能很轻松的解决了，可是问题往往没有那么简单。box-shadow只加在border外边缘，跟我们想要的真的是差太多。仲么办呢？跟上面的原理差不太多，只是要用到css3中transform,把元素rotate(45deg),变成两个菱形，然后对底下的元素加box-shadow，然后用后面的元素覆盖底下的元素。代码如下：

.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;
}

在浏览器中的效果如下图: