css实现小三角（原理）
发布时间：2016-03-17 17:00:21
效果图如图1所示：（简单示范，有点丑，莫介意）PS:兼容IE，FF , chrome ,360安全浏览器先讲下原理吧，如图2所示：这个div的样式如下所示：div{ width: 0px; height: 0px; border-width: 20px; border-s ...
效果图如
图1所示：（简单示范，有点丑，莫介意）
先讲下原理吧，如
图2所示：
解释：当
div的宽高为0时，设border的宽度并设颜色，会发现div像是被分割为4个小三角形，对应的CSS代码： 解释：④最后多加了两句css hack:
*width: 40px; *height: 40px;左三角：border-style: dashed solid dashed dashed;border-color: transparent pink transparent transparent;
右三角：border-style: dashed dashed dashed solid;border-color: transparent transparent transparent lightblue;
最后，给出效果图1的代码：
原标题：css实现小三角（原理）
关键词：CSS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
