CSS边框外的⼩三⾓形+阴影效果的实现。本⽂转载于：猿2048⽹站
...虽然是⼀个很⼩的问题，但其实还是挺实⽤的。
实现⼀个边框外的⾓。
⽤纯CSS来写。
⼀开始实现的效果是这个样⼦的。
但是这个效果没有办法给他附带阴影，所以换了⼀种写法。实现成了这个样⼦
box shadow怎么设置想要实现这个⼩三⾓形，不适⽤icon ，⽤纯CSS写，其实是利⽤了border的特性来实现的。
..之前都不晓得，后来有⼈告诉我之后，⾃⼰研究了⼀下才明⽩的。
虽然⽹上讲的⼈很多，但是我觉得把⾃⼰的收获记录下来才是最棒的。
我们先来看看border是什么样⼦的吧！
我们为⼀个长宽10px⼤⼩的盒⼦定义了30px的上下左右的边框
.border{
width: 10px;
height:10px;
border-top: 30px solid red;
border-left: 30px solid blue;
border-right:  30px solid green;
border-bottom:  30px solid yellow;
}
他的边框的边与边的交接是斜的！！
就是利⽤斜边，我们就可以画出三⾓形了！
⾸先我们将盒⼦归零。
然后把其中三边变透明，就可以看到⼀个三⾓形出现啦！
.border{
width: 0px;
height:0px;
border-top: 30px solid  transparent;
border-left: 30px solid blue;
border-right:  30px solid  transparent;
border-bottom:  30px solid  transparent;
}
但是...这并不能解决边框阴影的问题，因为如果加上阴影，效果就成这个样⼦了。
，阴影把我刚刚隐藏起来了的边框⼜显现出来啦！
这个时候如果想要实现三⾓形的边也有阴影，其实⼤佬们都已经知道了...再画⼀个三⾓形就好了...
再画⼀个border-top ；然后把图形旋转135°，再改变box-shadow的位置，就可以实现刚刚的效果啦。最后贴⼀段源码，⼤家可以⾃⼰去尝试尝试哦！
.Father{
position: relative;
width: 200px;
height: 100px;
background-color: #fafafa;
box-shadow: 0 0 5px #444;
border-radius: 4px;
}
.ThreeC{
position: absolute;
top: 30px;
right: -30px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom:20px solid #fafafa;
border-left:  20px solid #fafafa;
border-right: 20px solid transparent;
transform: rotate(-135deg);
box-shadow: 0px 0px 5px #444;
} 
<div class="Father">
a
<div class="ThreeC"></div>
</div>
嘿嘿，记录。⽅便⼤家看看。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。