小Tip：有三角的指示框阴影实现
2018-07-18 本文已影响3人
不二很纯洁
有三角的指示阴影框
利用css3滤镜 drop-shadow
直接上代码：
<!DOCTYPE html>
<html>
<head>
<style>
.box{
width:200px;
filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.4));
}
.jiao{
height: 0px;
width: 0px;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
border-left: 10px solid transparent;
margin: 0 auto;
}
.con{
width:200px;
height:200px;
background: #fff;
border-radius: 5px;
}
</style>
</head>
<body>
<div class="box">
<div class="jiao"></div>
<div class="con"></div>
</div>
</body>
</html>
